jQuery EasyUI 数据网格 - 添加分页组件
jQuery EasyUI 数据网格 - 添加分页组件
1. 引入 EasyUI 相关文件
在 HTML 文件中，首先需要引入 jQuery 和 EasyUI 的 JavaScript 和 CSS 文件：
<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引入 EasyUI 核心文件 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery-easyui/1.8.0/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/jquery-easyui/1.8.0/themes/icon.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-easyui/1.8.0/jquery.easyui.min.js"></script>
2. 创建数据网格表格
在 HTML 文件中，创建一个表格：
<table id="datagrid"></table>
在 JavaScript 文件中，定义该表格为 EasyUI 的数据网格：
$('#datagrid').datagrid({
url: 'data.json', // 数据来源
pagination: true, // 启用分页组件
pageSize: 10, // 每页显示的记录数
pageList: [10, 20, 30, 40], // 可以选择的每页记录数
columns: [[
{field: 'id', title: '编号', width: 100},
{field: 'name', title: '名称', width: 100},
{field: 'price', title: '价格', width: 100}
]]
});
其中，url 参数指定数据来源的 URL 地址，可以是一个返回 JSON 数据的服务器接口。columns 参数定义表格的列信息，每一个元素表示一个列，其中 field 表示该列对应的数据字段，title 表示该列的标题，width 表示该列的宽度。
3. 设置分页组件参数
为了启用分页组件，需要在数据网格的参数中设置 pagination 为 true，并且设置 pageSize 每页显示的记录数，pageList 可以选择的每页记录数。
$('#datagrid').datagrid({
url: 'data.json', // 数据来源
pagination: true, // 启用分页组件
pageSize: 10, // 每页显示的记录数
pageList: [10, 20, 30, 40], // 可以选择的每页记录数
columns: [[
{field: 'id', title: '编号', width: 100},
{field: 'name', title: '名称', width: 100},
{field: 'price', title: '价格', width: 100}
]]
});
4. 处理分页事件
为了在用户点击分页按钮时能够获得正确的数据，需要监听分页事件，得到当前页码和每页记录数，然后根据这些信息向服务器获取数据并更新数据网格。
$('#datagrid').datagrid({
url: 'data.json', // 数据来源
pagination: true, // 启用分页组件
pageSize: 10, // 每页显示的记录数
pageList: [10, 20, 30, 40], // 可以选择的每页记录数
columns: [[
{field: 'id', title: '编号', width: 100},
{field: 'name', title: '名称', width: 100},
{field: 'price', title: '价格', width: 100}
]],
onLoadSuccess: function(data) {
// 数据加载成功后，禁用分页组件中不可用的按钮
var pager = $('#datagrid').datagrid('getPager');
if (pager) {
var options = pager.data('pagination').options;
if (options.total <= options.pageSize) {
$(pager).pagination('disable', 'prev');
$(pager).pagination('disable', 'next');
$(pager).pagination('disable', 'first');
$(pager).pagination('disable', 'last');
} else {
$(pager).pagination('enable', 'prev');
$(pager).pagination('enable', 'next');
$(pager).pagination('enable', 'first');
$(pager).pagination('enable', 'last');
}
}
},
onLoadError: function () {
// 数据加载失败时，提示错误信息
$.messager.alert('错误', '数据加载失败，请重试！');
}
});
$('#datagrid').datagrid('getPager').pagination({
onSelectPage: function(pageNum, pageSize) {
// 用户选择页码或每页记录数时，向服务器请求数据
$('#datagrid').datagrid('load', {
page: pageNum, // 页码
rows: pageSize // 每页记录数
});
}
});
在代码中，通过监听 onLoadSuccess 事件来禁用不可用的按钮，这个事件在数据加载成功后触发。onLoadError 事件在数据加载失败时触发，可以提示用户重新加载数据。在分页组件中，通过监听 onSelectPage 事件来处理用户选择页码或每页记录数的事件，并向服务器加载新的数据。