news 2026/4/18 12:58:35

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/4/18 8:17:52

jQuery EasyUI 窗口 - 创建简单窗口

下面直接给你最实用、最常见的创建简单窗口&#xff08;window&#xff09;方法&#xff0c;jQuery EasyUI 的 window 组件超级简单好用&#xff0c;复制粘贴就能弹出专业对话框&#xff0c;领导最爱的“弹窗表单、确认框、详情查看”效果全都有&#xff01; 方法1&#xff1a…

作者头像 李华
网站建设 2026/4/18 8:48:05

Minecraft模组汉化终极指南:5步实现完美中文界面体验

Minecraft模组汉化终极指南&#xff1a;5步实现完美中文界面体验 【免费下载链接】masa-mods-chinese 一个masa mods的汉化资源包 项目地址: https://gitcode.com/gh_mirrors/ma/masa-mods-chinese 还在为复杂的英文模组界面而烦恼吗&#xff1f;Masa Mods中文汉化资源包…

作者头像 李华
网站建设 2026/4/18 8:17:02

jQuery EasyUI 窗口 - 自定义带有工具条和按钮的对话框

下面直接给你最实用、最专业的自定义带有工具条&#xff08;toolbar&#xff09;和按钮&#xff08;buttons&#xff09;的对话框方法&#xff0c;jQuery EasyUI 的 dialog 组件完美支持同时设置顶部工具栏 底部按钮栏&#xff0c;复制粘贴就能做出领导最爱的“专业表单弹窗”…

作者头像 李华
网站建设 2026/4/17 21:15:26

鸿蒙“朋友圈”上新!这些应用在HarmonyOS 6上玩出了新花样

鸿蒙os 你是不是还在为手动记账烦恼&#xff1f;是不是希望出行信息能实时浮现在手机桌面上&#xff1f;随着HarmonyOS6的成熟与Mate系列新机的热销&#xff0c;一批人们熟悉的应用不仅“鸿蒙化”&#xff0c;还带来了耳目一新的玩法。最近&#xff0c;华为应用市场迎来一波鸿蒙…

作者头像 李华
网站建设 2026/4/18 8:15:41

争夺下一个万亿赛道!中国信通院报告披露:自动驾驶成为抢占科技发展制高点的战略要地

“十五五”规划建议明确提出&#xff0c;要抢占科技发展、人工智能产业应用两大制高点。李德毅院士近期刊文指出&#xff0c;“高级别智能驾驶汽车是抢占科技发展制高点必不可少的一部分”。12月12日&#xff0c;中国信通院2026深度观察报告会——人工智能法制专题报告会上&…

作者头像 李华
网站建设 2026/4/18 10:52:44

10分钟用AI打造图片选择器原型验证创意

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 快速生成一个创新的图片选择交互原型&#xff1a;1. 采用圆形裁剪预览界面 2. 支持手势缩放和旋转图片 3. 添加滤镜效果实时预览 4. 实现社交分享按钮 5. 响应式设计适配移动端 6. …

作者头像 李华