jQuery EasyUI 数据网格内置分页功能，但默认工具栏往往无法满足复杂业务需求。通过获取 pager 对象并重新配置 pagination 选项，开发者可隐藏冗余控件并注入自定义按钮，实现更贴合实际场景的分页交互。

启用数据网格分页功能

数据网格（DataGrid）默认不显示分页控件，需显式开启 pagination 属性。以下示例展示基础表格结构及分页启用方式：

    

        

            
Item ID
            
Product ID
            
List Price
            
Unit Cost
            
Attribute
            
Stauts
        
    

关键配置为 pagination="true"，该属性触发 EasyUI 自动生成分页工具栏。表格通过 url 属性加载 data/datagrid_data.json 数据源，列定义包含 Item ID、Product ID、List Price、Unit Cost、Attribute 和 Status 六个字段。

自定义分页工具栏按钮

获取分页对象后，可通过 pagination 方法覆盖默认配置。以下代码演示如何隐藏页面列表并添加三个自定义操作按钮：

var pager = $('#tt').datagrid('getPager');    // 获取数据网格的分页对象
pager.pagination({
    showPageList:false,                       // 隐藏每页显示条数下拉列表
    buttons:[{
        iconCls:'icon-search',
        handler:function(){
            alert('search');
        }
    },{
        iconCls:'icon-add',
        handler:function(){
            alert('add');
        }
    },{
        iconCls:'icon-edit',
        handler:function(){
            alert('edit');
        }
    }],
    onBeforeRefresh:function(){
        alert('before refresh');
        return true;                          // 返回 true 允许刷新，返回 false 可阻止
    }
});

配置说明：

• showPageList:false 移除默认的每页记录数选择器，简化界面。
• buttons 数组定义自定义按钮，每个按钮需指定 iconCls（图标样式）和 handler（点击回调）。
• onBeforeRefresh 钩子函数在用户点击刷新按钮前触发，返回 true 继续刷新流程，返回 false 可拦截操作。

实现注意事项

自定义分页时需确保 EasyUI 核心库及主题样式已正确引入，否则 iconCls 图标可能无法渲染。按钮的 handler 函数应替换为实际业务逻辑，例如发起 AJAX 请求或打开模态窗口。若需动态增删按钮，可调用 pager.pagination('options').buttons 获取配置数组后修改，并重新初始化分页组件。