异常教程
jQuery EasyUI 数据网格 – 自定义分页（超详细）
💡一则或许对你有用的小广告
欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论
- 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于
Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;- 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;
截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观
前言
在现代 Web 开发中，数据展示与交互是核心需求之一。jQuery EasyUI 数据网格凭借其直观的界面设计与丰富的功能模块，成为前后端开发者广泛使用的工具。然而，默认的分页功能往往无法满足复杂场景的需求。本文将深入讲解如何通过自定义分页实现更灵活的用户体验，帮助开发者突破框架限制，打造符合业务需求的解决方案。
一、理解 EasyUI 数据网格与分页基础
1.1 数据网格的核心作用
数据网格（DataGrid）是 EasyUI 提供的表格组件，用于在页面中展示结构化数据。它支持排序、筛选、分页等功能，但默认配置通常无法直接满足个性化需求。例如：
- 需要动态调整分页按钮的样式
- 要求分页逻辑与后端 API 深度集成
- 需要根据用户行为实时更新分页状态
1.2 默认分页功能解析
EasyUI 的数据网格默认分页功能通过 pagination 属性启用。其核心配置参数如下：
| 参数名 | 描述 | 默认值 |
|---|---|---|
pageNumber | 当前页码 | 1 |
pageSize | 每页显示的行数 | 10 |
pageList | 可选的每页行数列表 | [10, 20, 30] |
showPageList | 是否显示页数选择器 | true |
onSelectPage | 切换页码时触发的回调函数 | - |
示例代码：
$('#dg').datagrid({
url: '/api/data',
pagination: true,
pageSize: 15,
pageList: [10, 15, 20],
onSelectPage: function(pageNumber, pageSize) {
console.log('切换到第 ' + pageNumber + ' 页，每页 ' + pageSize + ' 条');
}
});
二、自定义分页的核心方法与技巧
2.1 样式自定义：让分页控件更美观
默认分页控件的样式可能与项目主题不匹配。通过覆盖 EasyUI 的 CSS 类，可以轻松实现样式定制：
/* 示例：修改分页按钮的背景色和边框 */
.pagination-panel a {
background-color: #4CAF50 !important;
border: 1px solid #45a049 !important;
}
.pagination-panel .numbers td {
margin: 0 5px;
}
2.2 动态调整分页逻辑
某些场景下需要根据用户行为动态修改分页参数，例如：
- 用户切换数据过滤条件后重置页码
- 根据屏幕尺寸自动调整
pageSize
案例：当用户选择“按时间排序”时，重置分页到第一页：
function resetPagination() {
$('#dg').datagrid('options').pageNumber = 1;
$('#dg').datagrid('reload');
}
2.3 自定义分页事件处理
通过绑定 onBeforeLoad 和 onLoadSuccess 等事件，可以在分页加载前后执行自定义操作：
$('#dg').datagrid({
onLoadSuccess: function(data) {
if (data.total === 0) {
alert('当前筛选条件下无数据！');
}
}
});
三、实战案例：实现“无限滚动”分页效果
3.1 场景需求
传统分页控件可能影响用户体验，尤其在移动端。通过模拟“无限滚动”效果，当用户滚动到页面底部时自动加载下一页数据。
3.2 实现步骤
- 禁用默认分页：通过设置
pagination: false关闭原生分页 - 监听滚动事件：检测用户滚动到页面底部
- 动态加载数据：通过
url参数传递当前页码，更新数据网格
完整代码示例：
<!-- HTML 结构 -->
<div id="dg" style="height:400px"></div>
// 初始化数据网格
var currentPage = 1;
var pageSize = 10;
function loadData() {
$('#dg').datagrid({
url: '/api/data?page=' + currentPage + '&size=' + pageSize,
onLoadSuccess: function(data) {
if (data.total > currentPage * pageSize) {
currentPage += 1;
}
}
});
}
// 监听滚动事件
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
loadData(); // 触发加载下一页
}
});
// 初始加载
loadData();
四、进阶技巧与常见问题解决
4.1 与后端 API 的深度集成
若后端接口返回的数据格式与 EasyUI 默认期望的格式（如 total、rows）不一致，可通过 queryParams 和 loadFilter 进行转换：
$('#dg').datagrid({
queryParams: {
customParam: 'value' // 添加自定义参数
},
loadFilter: function(data) {
return {
total: data.count,
rows: data.items
};
}
});
4.2 性能优化建议
- 延迟加载：通过
pageNumber和pageSize参数控制数据量，避免一次性加载过多数据 - 缓存策略：对静态分页数据（如
pageList）使用本地缓存 - 事件节流：对高频事件（如滚动触发）使用
setTimeout防止过度调用
4.3 常见问题解答
Q：自定义分页后数据未更新？
A：检查 url 参数是否传递了正确的 pageNumber，并确保后端接口能正确解析参数。
Q：分页控件显示异常？
A：尝试清除浏览器缓存，或通过 pagination 对象的 refresh 方法强制刷新：
$('#dg').datagrid('getPager').pagination('refresh', {
pageNumber: 1
});
结论
通过本文的讲解，开发者可以掌握jQuery EasyUI 数据网格 – 自定义分页的核心方法与实战技巧。从基础配置到动态事件处理，再到与后端的深度集成，自定义分页不仅能提升用户体验，还能显著增强系统的灵活性。建议读者结合项目需求，逐步探索 EasyUI 的其他高级功能，例如远程排序、列过滤等，以构建更强大的数据展示系统。
通过本文的深入解析，希望读者能将自定义分页技术灵活应用于实际开发中，为用户打造更流畅、个性化的数据交互体验。