jEasyUI 自定义分页学习笔记

什么是jEasyUI？

jEasyUI 是一个基于 jQuery 的 UI 库，提供了一系列易于使用的 UI 组件，可帮助开发人员快速地构建出美观、易用的网站或 Web 应用程序。

什么是自定义分页？

在使用 jEasyUI 的 datagrid 组件时，系统默认提供了一种分页方式，即在表格底部显示页码和“上一页”、“下一页”等按钮。但有时候我们希望能够自定义分页方式，例如使用下拉框选择每页显示的记录数，或者使用滑动条来控制当前页码。

如何实现自定义分页？

jEasyUI 提供了 pagination 组件，可用于实现自定义分页。下面是一个简单的例子：

htmlCopy Code
<div id="pager"></div>

javascriptCopy Code
$('#datagrid').datagrid({
    url: 'get_data.php',
    pagination: true,
    pageSize: 10,
    pageList: [10, 20, 30, 50],
    pageNumber: 1,
    queryParams: {},
    onLoadSuccess: function(data) {
        if (data.total == 0) {
            $('#pager').pagination('refresh', { total: 0 });
        } else {
            $('#pager').pagination('refresh', { total: data.total });
        }
    }
});

$('#pager').pagination({
    layout: ['list', 'sep', 'first', 'prev', 'links', 'next', 'last', 'sep', 'refresh'],
    onSelectPage: function(pageNumber, pageSize) {
        $('#datagrid').datagrid('load', {
            page: pageNumber,
            rows: pageSize
        });
    }
});

在上面的例子中，我们首先在 HTML 中添加了一个 div 标签，用于显示自定义分页控件。然后在 JavaScript 中，我们通过 pagination 组件来实现自定义分页的功能。

需要注意的是，我们需要在 datagrid 的 onLoadSuccess 事件中动态地设置分页控件的总记录数 total，以便控件能够正常显示。

此外，我们还可以通过 layout 属性来定制分页控件的布局，例如增加“刷新”按钮等。

总结

jEasyUI 提供了丰富的 UI 组件，其中 pagination 组件可用于实现自定义分页。通过动态设置分页控件的总记录数和定制分页控件的布局，我们可以轻松地实现自定义分页的功能。