以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 自定义分页”的专业回答。我将详细讲解 jQuery EasyUI 中数据网格（DataGrid）如何实现自定义分页，包括基础用法、高级配置和动态数据处理，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新版本为参考。
jQuery EasyUI 数据网格 – 自定义分页
目录
1. 引言
jQuery EasyUI 的数据网格（DataGrid）内置了分页功能，但通过自定义分页，你可以调整分页样式、行为或与服务器端数据交互，以满足特定需求。本教程将从基础到高级，带你掌握如何在 DataGrid 中实现自定义分页，并提供实用示例。
2. 自定义分页概述
2.1 什么是自定义分页？
- 定义：自定义分页是指在 DataGrid 中通过
pagination组件或手动实现的分页逻辑，控制数据的分片展示，并可自定义分页控件的外观和功能。 - 实现方式：使用内置
pagination属性，或结合事件和服务器端数据动态调整分页。
2.2 自定义分页的应用场景
- 界面优化：调整分页按钮样式或显示内容。
- 大数据处理：结合服务器端分页加载大量数据。
- 参考：jQuery EasyUI 官方文档 DataGrid 分页部分（jeasyui.com/documentation）。
3. 实现基础自定义分页
3.1 准备工作
- 引入依赖：需要 jQuery 和 EasyUI 的核心文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
3.2 使用 pagination 组件
- 方法：设置
pagination: true启用分页，并通过pageSize、pageList等属性自定义分页参数。 - 示例：
<table id="dg" class="easyui-datagrid" data-options="
pagination: true,
pageSize: 5,
pageList: [5, 10, 20]">
<thead>
<tr>
<th data-options="field:'id'">ID</th>
<th data-options="field:'name'">名称</th>
</tr>
</thead>
</table>
3.3 实例：基础自定义分页
以下是一个基础自定义分页的完整示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 基础自定义分页</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<style>
.container { max-width: 600px; margin: 20px auto; }
</style>
</head>
<body>
<div class="container">
<h1>基础自定义分页</h1>
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
data-options="
pagination: true,
pageSize: 5,
pageList: [5, 10, 20],
rownumbers: true,
singleSelect: true">
<thead>
<tr>
<th data-options="field:'id',width:100">ID</th>
<th data-options="field:'name',width:200">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
</div>
<script>
// 示例数据
var data = {
total: 12,
rows: [
{ id: 1, name: '产品 1', price: 10.5 },
{ id: 2, name: '产品 2', price: 20.75 },
{ id: 3, name: '产品 3', price: 15.0 },
{ id: 4, name: '产品 4', price: 25.0 },
{ id: 5, name: '产品 5', price: 30.0 },
{ id: 6, name: '产品 6', price: 12.5 },
{ id: 7, name: '产品 7', price: 18.0 },
{ id: 8, name: '产品 8', price: 22.0 },
{ id: 9, name: '产品 9', price: 27.5 },
{ id: 10, name: '产品 10', price: 35.0 },
{ id: 11, name: '产品 11', price: 40.0 },
{ id: 12, name: '产品 12', price: 45.0 }
]
};
$('#dg').datagrid('loadData', data);
</script>
</body>
</html>
- 运行方法：保存为 HTML 文件，在浏览器中打开。
- 效果：显示 12 条数据，每页 5 条，底部分页条允许切换页数（5、10、20 条/页）。
4. 高级自定义分页配置
4.1 自定义分页控件
- 方法：通过
pagination选项自定义按钮、显示信息或事件。 - 示例：添加自定义按钮和显示信息：
pagination: {
pageSize: 5,
pageList: [5, 10, 20],
beforePageText: '第',
afterPageText: '页，共 {pages} 页',
displayMsg: '显示 {from} 到 {to}，共 {total} 条',
buttons: [{
iconCls: 'icon-refresh',
handler: function() {
$('#dg').datagrid('reload');
}
}]
}
4.2 动态加载分页数据
- 方法：结合
url属性和服务器端分页参数（page和rows）。 - 示例：
$('#dg').datagrid({
url: 'get_data.php',
pagination: true,
pageSize: 5,
pageList: [5, 10, 20]
});
4.3 实例：服务器端动态分页
以下是一个结合服务器端数据的动态分页示例：
前端代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 服务器端动态分页</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
<style>
.container { max-width: 600px; margin: 20px auto; }
</style>
</head>
<body>
<div class="container">
<h1>服务器端动态分页</h1>
<table id="dg" class="easyui-datagrid" style="width:100%;height:300px"
data-options="
url: 'get_data.php',
pagination: {
pageSize: 5,
pageList: [5, 10, 20],
beforePageText: '第',
afterPageText: '页，共 {pages} 页',
displayMsg: '显示 {from} 到 {to}，共 {total} 条',
buttons: [{
iconCls: 'icon-refresh',
handler: function() {
$('#dg').datagrid('reload');
}
}]
},
rownumbers: true,
singleSelect: true,
onLoadSuccess: function(data) {
console.log('加载数据:', data);
}">
<thead>
<tr>
<th data-options="field:'id',width:100">ID</th>
<th data-options="field:'name',width:200">名称</th>
<th data-options="field:'price',width:100,align:'right'">价格</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
后端代码（get_data.php）
<?php
header('Content-Type: application/json');
// 获取分页参数
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$rows = isset($_GET['rows']) ? intval($_GET['rows']) : 5;
$offset = ($page - 1) * $rows;
// 模拟数据
$total = 50; // 总记录数
$data = [];
for ($i = $offset + 1; $i <= min($offset + $rows, $total); $i++) {
$data[] = [
'id' => $i,
'name' => '产品 ' . $i,
'price' => $i * 10.5
];
}
// 返回分页数据
echo json_encode([
'total' => $total,
'rows' => $data
]);
?>
- 运行方法：
- 将 HTML 保存为
index.html，PHP 保存为get_data.php。 - 使用本地服务器（如 XAMPP）运行，确保 PHP 环境可用。
- 效果：
- 显示 50 条数据的分页视图，每页 5 条，可切换页数（5、10、20）。
- 分页条显示“第 X 页，共 Y 页”和“显示 A 到 B，共 50 条”，并带有刷新按钮。
5. 最佳实践与注意事项
5.1 设计与实现建议
- 用户体验：自定义分页信息（如
displayMsg）以匹配语言和需求。 - 分页大小：选择合理的
pageSize和pageList，避免加载过多数据。
5.2 性能优化与调试
- 性能：服务器端分页优于客户端分页，适合大数据量场景。
- 调试：检查
onLoadSuccess中的数据，确保分页参数正确传递。
6. 结论
jQuery EasyUI 的数据网格通过 pagination 组件提供了灵活的分页支持，结合自定义控件和服务器端数据可满足复杂需求。本文通过基础和高级示例展示了实现过程，帮助你快速上手。如果需要合并单元格，可参考 合并单元格 或访问 jQuery EasyUI 官方文档（jeasyui.com）。
回答特点
- 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
- 实用性：从客户端分页到服务器端动态加载，覆盖实际需求。
- 内部链接：通过
<a href="#ID">跳转，如 实现基础自定义分页。 - 出站链接：嵌入正文，指向官方文档。
如何运行
- 基础示例直接保存为 HTML 文件打开即可；高级示例需配置本地服务器运行 PHP 文件。
发表回复