news 2026/5/29 3:04:27

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/5/20 9:12:52

Watt Toolkit:AI如何助力开发者提升效率

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 使用Watt Toolkit的AI功能&#xff0c;自动生成一个Python脚本&#xff0c;实现从指定URL抓取数据并存储到本地数据库的功能。要求包含错误处理、数据清洗和定时任务调度。代码应支…

作者头像 李华
网站建设 2026/5/28 22:48:58

传统vsAI:Agent开发效率提升300%的秘诀

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 创建一个性能对比Demo&#xff1a;1. 传统方式手写一个天气查询Agent 2. 使用快马平台AI生成相同功能Agent。要求记录两种方式的开发时间、代码量和运行效率。生成完整的对比测试代…

作者头像 李华
网站建设 2026/5/22 20:31:28

AI计量器具管理系统开发:从技术落地到效率革命

制造、医疗、化工等行业的正常运转&#xff0c;离不开计量器具的精准护航——小到车间压力表&#xff0c;大到实验室精密分析仪&#xff0c;其准确性直接决定产品质量与生产安全。但传统管理模式的低效与漏洞&#xff0c;让不少企业饱受困扰。从产品开发视角看&#xff0c;AI计…

作者头像 李华
网站建设 2026/5/28 16:25:33

AI模拟练习系统开发:让练习精准匹配学习需求

传统模拟练习的痛点早就戳中了师生的核心困扰&#xff1a;学生埋头“题海”却总在重复做会的题&#xff0c;薄弱点始终没补上&#xff1b;老师批改堆积如山的练习卷要耗大量时间&#xff0c;反馈慢得赶不上复习节奏&#xff1b;更关键的是&#xff0c;很多模拟题和真实考试、实…

作者头像 李华
网站建设 2026/5/26 4:58:01

39-STM32F103RCT6的CAN通讯

STM32F103RCT6的CAN通讯 Can_Filter_Config(0,0, 0x100,0x7ff,0);//过滤器,0标准帧,Can_Send_Msg(CAN_ID,can

作者头像 李华