当前位置：首页 > news >正文

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

news 2026/7/4 14:29:22

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

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

<tableid="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><thdata-options="field:'ck',checkbox:true"></th><thdata-options="field:'id',width:80">ID</th><thdata-options="field:'name',width:150">姓名</th><thdata-options="field:'age',width:80">年龄</th><thdata-options="field:'email',width:200">邮箱</th><thdata-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")));}echojson_encode(array('total'=>$total,'rows'=>$data));?>

效果：

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

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

$(function(){varpager=$('#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：分页时保持选中状态（批量操作神器）

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