news 2026/4/21 5:49:18

jQuery EasyUI 数据网格 - 自定义分页

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery EasyUI 数据网格 - 自定义分页

下面直接给你最实用、最常见的几种自定义分页栏方法(jQuery EasyUI datagrid),复制粘贴就能用,领导最喜欢的那种专业效果全都有!

方法1:最简单 - 在分页栏右边添加自定义按钮(推荐入门用这个)
比如加“导出Excel”、“刷新全部”、“跳转到某页”按钮。

<tableid="dg"class="easyui-datagrid"title="用户列表"url="your_data.json"pagination="true"fitColumns="true"singleSelect="false"rownumbers="true"><thead><tr><thfield="ck"checkbox="true"></th><thfield="id"width="80">ID</th><thfield="name"width="100">姓名</th><thfield="age"width="60">年龄</th></tr></thead></table><script>$(function(){varpager=$('#dg').datagrid('getPager');// 获取分页栏对象pager.pagination({pageSize:20,// 默认每页条数pageList:[10,20,50,100],// 可选每页条数showPageList:true,// 显示下拉选择每页条数showRefresh:true,// 显示刷新按钮displayMsg:'当前显示 {from} - {to} 条,共 {total} 条记录',// 自定义提示文字layout:['list','sep','first','prev','sep','manual','sep','next','last','sep','refresh'],// 自定义布局顺序buttons:[{// 右边添加自定义按钮iconCls:'icon-excel',text:'导出Excel',handler:function(){alert('导出所有数据到Excel');// 这里写你的导出逻辑}},{iconCls:'icon-reload',text:'刷新全部',handler:function(){$('#dg').datagrid('reload');}}],onBeforeRefresh:function(){// 刷新前可以加提示returnconfirm('确定刷新数据吗?');}});});</script>

效果:分页栏右边会出现“导出Excel”和“刷新全部”两个按钮,超级专业!

方法2:隐藏默认的部分元素,只保留你想要的(比如不要每页条数下拉)

varpager=$('#dg').datagrid('getPager');pager.pagination({showPageList:false,// 隐藏每页条数下拉框showRefresh:false,// 隐藏刷新按钮layout:['first','prev','links','next','last'],// 只显示首尾页、上下页、页码链接buttons:[{iconCls:'icon-print',text:'打印',handler:function(){alert('打印当前页');}}]});

方法3:完全自定义分页栏(高级用法,比如加输入框跳转页码)

varpager=$('#dg').datagrid('getPager');$(pager).pagination({layout:['sep'],// 先清空默认布局beforePageText:'跳转到',afterPageText:'页',displayMsg:'',buttons:[{text:'跳转',handler:function(){varpage=$(pager).find('input.pagination-num').val();$('#dg').datagrid('options').pageNumber=parseInt(page);$('#dg').datagrid('reload');}}]});

方法4:分页栏放在顶部(默认在底部)
在datagrid选项里加:

$('#dg').datagrid({pagination:true,pagePosition:'top'// 或 'both' 上下都有});

你现在直接用方法1,复制到你的页面,刷新一下就能看到自定义的分页栏出来了!
很多项目里领导要求“分页栏要加导出按钮、显示总条数更清晰”,上面代码全满足。

想要我给你一个完整的HTML示例(带远程加载数据 + 复选框 + 自定义分页 + 批量删除)?
或者你告诉我你想在分页栏加什么按钮/功能(比如“导出选中行”、“统计合计”),我2分钟给你写好代码,复制就能跑!

快说说你现在的需求,我手把手帮你搞定,5分钟内看到完美分页效果!

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

jQuery EasyUI 数据网格 - 列运算

下面直接给你最实用、最常见的列运算&#xff08;calculated column 底部合计统计&#xff09;方法&#xff0c;jQuery EasyUI datagrid 支持超级好&#xff0c;复制粘贴就能用&#xff0c;领导最爱的“单价*数量金额自动计算 底部总金额/平均值”全都有&#xff01; 方法1&…

作者头像 李华
网站建设 2026/4/20 7:20:21

企业环境中.NET 3.5离线部署实战指南

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个企业级.NET Framework 3.5离线部署工具&#xff0c;包含&#xff1a;1) 图形化界面选择安装源路径&#xff1b;2) 自动识别域内计算机&#xff1b;3) 批量静默安装功能&…

作者头像 李华
网站建设 2026/4/20 19:41:41

TVBoxOSC调试实战指南:从零掌握5大排障核心技能

TVBoxOSC调试是每个用户必须掌握的关键技能&#xff0c;面对设备连接异常、界面无响应、功能模块失效等常见问题&#xff0c;一套系统化的调试方法能帮你快速定位并解决问题。本指南将带你从基础到进阶&#xff0c;掌握TVBoxOSC调试的核心要点。 【免费下载链接】TVBoxOSC TVBo…

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

AI助力Ubuntu输入法开发:从零到一键部署

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 开发一个基于Ubuntu的智能输入法&#xff0c;支持拼音和五笔输入&#xff0c;具有用户词库记忆功能。使用Python和GTK开发&#xff0c;集成AI模型优化输入预测。要求代码结构清晰&a…

作者头像 李华
网站建设 2026/4/19 20:44:34

1小时打造专属视频下载器:you-get原型开发实战

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容&#xff1a; 快速开发一个定制视频下载器原型&#xff0c;基于you-get核心功能。特殊需求&#xff1a;1) 只下载特定分辨率(如1080p) 2) 自动添加片头片尾 3) 下载完成后自动转MP3 4) 集成到Tel…

作者头像 李华
网站建设 2026/4/20 10:08:03

使用LessPageEngineer实现某祥航空机票查询(t盾)

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 1. 开启LPE服务 from LessPag…

作者头像 李华