news 2026/8/15 20:27:18

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 数据网格 - 添加分页组件

下面直接给你最实用、最常见的添加分页组件(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);}});}});

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

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

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/13 16:07:38

ComfyUI多GPU加速实战:从卡顿到流畅的性能飞跃指南

还在为AI图像生成速度慢而烦恼吗&#xff1f;ComfyUI多GPU配置让你告别等待&#xff0c;体验极速创作的乐趣&#xff01;作为最强大的模块化稳定扩散GUI&#xff0c;ComfyUI通过智能GPU调度和分布式计算技术&#xff0c;能够将你的创作效率提升数倍。今天就来分享我的实战经验&…

作者头像 李华
网站建设 2026/8/15 17:31:58

电商系统中的Spring Bean异常实战处理

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个简化版电商系统&#xff0c;包含商品、订单和用户模块。在订单服务中故意制造BeanCreationNotAllowedException异常场景&#xff0c;然后演示&#xff1a;1. 异常产生的原因…

作者头像 李华
网站建设 2026/8/13 20:26:16

Golang文档自动化革命:docx库的实战应用指南

Golang文档自动化革命&#xff1a;docx库的实战应用指南 【免费下载链接】docx Simple Google Go (Golang) library for replacing text in Microsoft Word (.docx) file 项目地址: https://gitcode.com/gh_mirrors/docx/docx 还在为Word文档的批量处理而头疼吗&#xf…

作者头像 李华
网站建设 2026/8/16 2:53:59

Adobe Illustrator自动化脚本实战指南:从新手到专家的效率革命

还在为Illustrator中重复繁琐的操作而烦恼吗&#xff1f;设计自动化正在彻底改变传统工作流程&#xff01;通过80余款专业JSX脚本&#xff0c;你可以将工作效率提升300%&#xff0c;让创意真正回归核心价值。这些Illustrator脚本覆盖了从艺术板管理到颜色处理、从路径编辑到批量…

作者头像 李华