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
事件来处理用户选择页码或每页记录数的事件,并向服务器加载新的数据。