news 2026/3/27 13:13:44

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/3/27 2:24:13

Tidal音乐下载神器:打造个人专属高品质音乐库的终极方案

Tidal音乐下载神器&#xff1a;打造个人专属高品质音乐库的终极方案 【免费下载链接】Tidal-Media-Downloader Download TIDAL Music On Windows/Linux/MacOs (PYTHON/C#) 项目地址: https://gitcode.com/gh_mirrors/ti/Tidal-Media-Downloader 还在为无法离线欣赏Tidal…

作者头像 李华
网站建设 2026/3/24 13:19:16

jQuery EasyUI 树形菜单 - 使用标记创建树形菜单

下面直接给你最实用、最常见的使用标记&#xff08;HTML标记&#xff09;创建树形菜单方法&#xff0c;jQuery EasyUI 的 tree 组件支持超级简单的 <ul><li> 标记方式构建树&#xff0c;复制粘贴就能做出左侧导航菜单、部门组织架构、分类目录等&#xff0c;领导最…

作者头像 李华
网站建设 2026/3/16 5:55:47

电商客服Agent开发实战:从0到1的完整案例

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个电商客服Agent&#xff0c;功能包括&#xff1a;1. 商品信息查询 2. 订单状态跟踪 3. 退换货流程引导 4. 个性化推荐。要求使用React前端Node.js后端&#xff0c;集成Mongo…

作者头像 李华
网站建设 2026/3/25 14:44:12

天地图Python SDK:从零开始掌握地图数据处理完整指南

天地图Python SDK&#xff1a;从零开始掌握地图数据处理完整指南 【免费下载链接】tianditu-python 项目地址: https://gitcode.com/gh_mirrors/ti/tianditu-python 天地图Python SDK是一款专为地理信息处理打造的开源工具&#xff0c;让普通用户也能轻松驾驭专业级地图…

作者头像 李华
网站建设 2026/3/26 6:45:02

【开题答辩全过程】以 广理毕业生闲置物品交易系统的设计与实现为例,包含答辩的问题和答案

个人简介一名14年经验的资深毕设内行人&#xff0c;语言擅长Java、php、微信小程序、Python、Golang、安卓Android等开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。感谢大家的…

作者头像 李华
网站建设 2026/3/27 7:40:47

【torch.compile】Inductor 为什么单输入单输出还是不能融合呢

以resnet50 的网络结构为例&#xff0c;解析为什么有些算子不能融合为什么 op1 和 op2 不能融合&#xff1f; 快速答案 op1 BatchNorm ReLU op2 MaxPool2D 它们不能融合的核心原因是&#xff1a;MaxPool2D 的复杂访问模式与 BatchNorm 的顺序写入不兼容。详细分析 op1 的特征…

作者头像 李华