jQuery EasyUI DataGrid 添加分页组件实现教程

本文详细演示如何在 jQuery EasyUI DataGrid 中集成分页组件。通过设置 'pagination' 属性，前端自动发送 'page' 和 'rows' 参数，后端接收并返回包含 'total' 和 'rows' 的 JSON 数据，实现高效的数据加载与分页展示。

最终效果预览

前置准备

在开始之前，请确保您的项目中已正确引入 jQuery 和 jQuery EasyUI 的核心文件（CSS 和 JS）。本教程将演示如何配置前端 DataGrid 组件，并配合后端 PHP 脚本实现完整的数据分页加载。

前端 DataGrid 配置

要实现分页功能，核心在于初始化 DataGrid 时开启分页属性，并指定数据加载的远程地址。

第1步：定义表格结构并开启分页

在 HTML 中使用

• url：指定从服务器获取数据的接口地址（例如 datagrid2_getdata.php）。
• pagination：设置为 true，这将在表格底部自动生成一个分页工具栏。
• rownumbers：设置为 true，在表格左侧显示行号。

以下是完整的前端 HTML 代码示例：

当用户切换页码时，DataGrid 会自动向服务器发送两个 POST 参数：page（当前页码，从 1 开始）和 rows（每页显示的行数）。

后端数据处理逻辑

后端需要接收前端发送的 page 和 rows 参数，计算偏移量，查询数据库，并返回符合 EasyUI 要求的 JSON 格式数据。

第2步：编写后端 PHP 分页处理代码

后端脚本主要完成以下任务： 1. 获取页码和每页行数，并计算数据偏移量（offset）。 2. 查询数据库总记录数（total）。 3. 根据偏移量和行数查询当前页的数据（rows）。 4. 将结果封装为 JSON 对象并输出。

参考代码如下（注意：示例中使用了已废弃的 mysql_query，实际生产环境建议使用 mysqli 或 PDO）：

后端返回的 JSON 必须包含 total（总记录数）和 rows（当前页数据数组）两个字段，否则分页组件无法正常工作。

常见问题与调整

• 分页组件不显示：请检查是否设置了 pagination="true"，且 url 属性指向了正确的后端接口。
• 切换页面无反应或数据错误：检查后端返回的 JSON 格式是否正确，确保包含 total 和 rows 字段。同时确认数据库查询语句中的 limit 参数计算无误。
• 数据库连接警告：示例代码使用了旧的 mysql 扩展，在 PHP 5.5+ 版本中已移除。建议将 mysql_query 替换为 mysqli_query 或 PDO::query，并处理相应的连接参数。

总结

通过为 jQuery EasyUI DataGrid 设置 pagination="true"，可以快速实现数据表格的分页功能。前端自动处理页码切换和参数传递，后端只需按照 total 和 rows 的格式返回 JSON 数据即可。这种前后端分离的分页模式，既保证了代码的简洁性，又提升了大数据量下的页面加载性能。

以上就是 jQuery EasyUI DataGrid 添加分页组件的详细内容，更多关于 EasyUI 数据表格的资料请关注本站其它相关文章！