jQuery EasyUI 数据网格 – 自定义分页

下面直接给你最实用、最常见的几种自定义分页栏方法（jQuery EasyUI datagrid），复制粘贴就能用，领导最喜欢的那种专业效果全都有！

方法1：最简单 – 在分页栏右边添加自定义按钮（推荐入门用这个）
比如加“导出Excel”、“刷新全部”、“跳转到某页”按钮。

<table id="dg" class="easyui-datagrid"  
    title="用户列表"  
    url="your_data.json"  
    pagination="true"  
    fitColumns="true"  
    singleSelect="false"  
    rownumbers="true">  
    <thead>  
        <tr>  
            <th field="ck" checkbox="true"></th>  
            <th field="id" width="80">ID</th>  
            <th field="name" width="100">姓名</th>  
            <th field="age" width="60">年龄</th>  
        </tr>  
    </thead>  
</table>  

<script>  
$(function(){  
    var pager = $('#dg').datagrid('getPager');  // 获取分页栏对象  
    pager.pagination({  
        pageSize: 20,                  // 默认每页条数  
        pageList: [10,20,50,100],      // 可选每页条数  
        showPageList: true,            // 显示下拉选择每页条数  
        showRefresh: true,             // 显示刷新按钮  
        displayMsg: '当前显示 {from} - {to} 条，共 {total} 条记录',  // 自定义提示文字  
        layout: ['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'],  // 自定义布局顺序  
        buttons: [{                    // 右边添加自定义按钮  
            iconCls:'icon-excel',  
            text:'导出Excel',  
            handler:function(){  
                alert('导出所有数据到Excel');  
                // 这里写你的导出逻辑  
            }  
        },{  
            iconCls:'icon-reload',  
            text:'刷新全部',  
            handler:function(){  
                $('#dg').datagrid('reload');  
            }  
        }],  
        onBeforeRefresh: function(){  
            // 刷新前可以加提示  
            return confirm('确定刷新数据吗？');  
        }  
    });  
});  
</script>

效果：分页栏右边会出现“导出Excel”和“刷新全部”两个按钮，超级专业！

方法2：隐藏默认的部分元素，只保留你想要的（比如不要每页条数下拉）

var pager = $('#dg').datagrid('getPager');  
pager.pagination({  
    showPageList: false,   // 隐藏每页条数下拉框  
    showRefresh: false,    // 隐藏刷新按钮  
    layout: ['first','prev','links','next','last'],  // 只显示首尾页、上下页、页码链接  
    buttons: [{  
        iconCls:'icon-print',  
        text:'打印',  
        handler:function(){ alert('打印当前页'); }  
    }]  
});  

方法3：完全自定义分页栏（高级用法，比如加输入框跳转页码）

var pager = $('#dg').datagrid('getPager');  
$(pager).pagination({  
    layout:['sep'],  // 先清空默认布局  
    beforePageText: '跳转到',  
    afterPageText: '页',  
    displayMsg: '',  
    buttons: [{  
        text:'跳转',  
        handler:function(){  
            var page = $(pager).find('input.pagination-num').val();  
            $('#dg').datagrid('options').pageNumber = parseInt(page);  
            $('#dg').datagrid('reload');  
        }  
    }]  
});  

方法4：分页栏放在顶部（默认在底部）
在datagrid选项里加：

$('#dg').datagrid({  
    pagination: true,  
    pagePosition: 'top'   // 或 'both' 上下都有  
});  

你现在直接用方法1，复制到你的页面，刷新一下就能看到自定义的分页栏出来了！
很多项目里领导要求“分页栏要加导出按钮、显示总条数更清晰”，上面代码全满足。

想要我给你一个完整的HTML示例（带远程加载数据 + 复选框 + 自定义分页 + 批量删除）？
或者你告诉我你想在分页栏加什么按钮/功能（比如“导出选中行”、“统计合计”），我2分钟给你写好代码，复制就能跑！

快说说你现在的需求，我手把手帮你搞定，5分钟内看到完美分页效果！