jQuery EasyUI 数据网格 – 添加分页组件

下面直接给你最实用、最常见的添加分页组件（pagination）方法，jQuery EasyUI datagrid 自带超级好用的分页器，开启后自动处理分页、每页条数、跳转、刷新等，复制粘贴就能用，领导最爱的“专业报表分页”效果全都有！

方法1：最简单最常用 – 开启内置分页组件（推荐现在就用这个，3秒出效果）

<table id="dg" class="easyui-datagrid" title="带分页的数据网格" style="width:900px;height:500px"
    data-options="
        url:'get_data.php',          <!-- 后台接口返回 {total:总数, rows:[当前页数据]} -->
        fitColumns:true,
        singleSelect:false,
        rownumbers:true,
        pagination:true,             <!-- 关键：开启分页 -->
        pageSize:20,                 <!-- 默认每页20条 -->
        pageList:[10,20,50,100]      <!-- 可选每页条数下拉列表 -->
    ">
    <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'id',width:80">ID</th>
            <th data-options="field:'name',width:150">姓名</th>
            <th data-options="field:'age',width:80">年龄</th>
            <th data-options="field:'email',width:200">邮箱</th>
            <th data-options="field:'regdate',width:120">注册日期</th>
        </tr>
    </thead>
</table>

后台接口必须返回的标准 EasyUI JSON 格式（get_data.php 示例）：

<?php
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = isset($_GET['rows']) ? intval($_GET['rows']) : 20;

$start = ($page-1)*$rows;

// 模拟数据（实际从数据库查询）
$total = 358;  // 总记录数
$data = array();
for($i=$start; $i<$start+$rows && $i<$total; $i++){
    $data[] = array(
        'id' => $i+1,
        'name' => '用户'.($i+1),
        'age' => rand(18,60),
        'email' => 'user'.($i+1).'@example.com',
        'regdate' => date('Y-m-d', strtotime("-".($i%30)." days"))
    );
}

echo json_encode(array('total'=>$total, 'rows'=>$data));
?>

效果：

• 表格底部自动出现分页栏
• 显示“第 1/18 页 共 358 条”
• 支持首页/上一页/下一页/尾页、跳转页码、每页条数选择、刷新按钮

方法2：自定义分页栏外观和按钮（更专业）

$(function(){
    var pager = $('#dg').datagrid('getPager');  // 获取分页器对象
    pager.pagination({
        pageSize: 20,
        pageList: [10,20,50,100,200],
        displayMsg: '当前显示 {from} 到 {to} 条，共 {total} 条记录',  // 自定义提示文字
        layout: ['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh','info'],  // 自定义按钮顺序
        showPageList: true,    // 显示每页条数下拉
        showRefresh: true,     // 显示刷新按钮
        beforePageText: '第',   // 页码文本框前提示文字
        afterPageText: '页 共 {pages} 页',
        buttons: [{            // 在分页栏右边添加自定义按钮
            iconCls:'icon-excel',
            text:'导出Excel',
            handler:function(){
                alert('导出当前页数据到Excel');
                // location.href = 'export.php?page=' + pager.pagination('options').pageNumber;
            }
        },{
            iconCls:'icon-print',
            text:'打印',
            handler:function(){
                window.print();
            }
        }]
    });
});

方法3：分页栏放在顶部或上下都有

$('#dg').datagrid({
    pagination: true,
    pagePosition: 'top'    // 'top' 顶部  'bottom' 底部（默认）  'both' 上下都有
});

方法4：分页时保持选中状态（批量操作神器）

var selectedRows = [];  // 全局保存选中行

$('#dg').datagrid({
    onCheck: function(index,row){
        selectedRows.push(row);
    },
    onUncheck: function(index,row){
        selectedRows = selectedRows.filter(function(r){return r.id != row.id;});
    },
    onCheckAll: function(rows){
        selectedRows = selectedRows.concat(rows);
    },
    onUncheckAll: function(){
        // 根据当前页数据过滤
    },
    onLoadSuccess: function(data){
        // 加载新页时，高亮之前选中的行
        $.each(selectedRows, function(i,row){
            var index = $(this).datagrid('getRowIndex', row);
            if(index != -1){
                $(this).datagrid('checkRow', index);
            }
        });
    }
});

你现在直接复制方法1的代码，准备好一个返回 {total:?, rows:[]} 的接口，刷新页面就能看到完美分页效果了！
结合之前的复选框 + 行内编辑 + 页脚摘要 + 子网格，你的后台数据表格已经完全专业级了。

想要我给你一个完整的HTML示例（带远程分页 + 自定义分页栏 + 导出按钮 + 跨页保持选中）？
或者你告诉我你的接口返回格式（比如已经是 {data:[], count:}），我2分钟帮你改写加载逻辑，复制就能跑！

快说说你现在的需求，我手把手帮你搞定，5分钟内看到超级专业的分页组件！