jQuery EasyUI 数据网格 – 添加分页组件（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Web 开发中，数据展示是一个核心场景。当数据量较大时，数据网格（DataGrid） 成为了解决这一问题的重要工具。而分页组件则是提升用户体验的“隐形助手”——它能让用户高效浏览海量数据，避免页面加载过慢或内存溢出的问题。本文将以 jQuery EasyUI 数据网格为例，深入讲解如何通过添加分页组件，实现优雅的数据分页功能。通过循序渐进的步骤和实际案例，即使是编程新手也能快速掌握这一技能。

什么是数据网格？分页组件为何重要？

数据网格：数据展示的“万能表盘”

数据网格（DataGrid）是一个功能强大的表格组件，能够动态渲染数据，并支持排序、过滤、编辑等操作。想象一个图书馆的书架：书籍按类别整齐排列，用户可以快速找到目标书籍。数据网格的作用类似——它将数据以表格形式“分类摆放”，让用户高效浏览信息。

分页组件：数据导航的“分层电梯”

当数据量达到数千甚至上万条时，一次性加载所有数据会导致页面卡顿。分页组件如同图书馆的楼层导航，将数据按“页”划分，用户通过点击页码“直达”目标楼层（即目标页），既节省了资源，又提升了交互体验。

步骤一：搭建基础数据网格

初始化数据网格的准备工作

在开始分页功能之前，需要先搭建一个基础数据网格。以下是核心步骤：

1. 引入依赖库：
   在 HTML 文件中引入 jQuery、EasyUI 的 CSS 和 JS 文件：

   <link rel="stylesheet" href="easyui/themes/default/easyui.css">  
   <script src="jquery.min.js"></script>  
   <script src="easyui/jquery.easyui.min.js"></script>  
   

2. 创建表格容器：
   使用 <div> 标签定义数据网格的显示区域：

   <div id="dataGrid" style="width:100%;height:auto;"></div>  
   

3. 初始化数据网格：
   通过 JavaScript 配置表格的基本属性，例如列定义、数据源等：

   $(function() {  
     $('#dataGrid').datagrid({  
       url: '/api/data',  // 数据接口地址  
       columns: [[  
         {field: 'id', title: 'ID', width: 100},  
         {field: 'name', title: '名称', width: 150},  
         {field: 'date', title: '日期', width: 150}  
       ]]  
     });  
   });  
   

步骤二：添加分页组件

分页组件的核心配置参数

在 EasyUI 中，分页功能通过 pagination 属性实现。以下是关键参数说明：

配置分页组件的完整代码示例

在数据网格初始化时，通过 pagination 参数开启分页功能，并设置相关属性：

$('#dataGrid').datagrid({  
  url: '/api/data',  
  pagination: true,  // 开启分页  
  pageSize: 15,      // 默认每页显示15条  
  pageList: [10, 15, 20], // 可选每页条数  
  columns: [[  
    {field: 'id', title: 'ID'},  
    {field: 'name', title: '名称'},  
    {field: 'date', title: '日期'}  
  ]],  
  onLoadSuccess: function(data) {  
    // 分页组件需要总条数数据  
    $(this).datagrid('getPager').pagination({  
      total: data.total  
    });  
  }  
});  

步骤三：实现数据加载与分页联动

后端接口的数据格式规范

EasyUI 的分页功能依赖后端返回的特定数据结构。后端需返回以下字段：

• total：总数据条数。
• rows：当前页的数据列表。

例如，一个典型的 JSON 响应可能如下：

{  
  "total": 150,  
  "rows": [  
    {"id": 1, "name": "商品A", "date": "2023-01-01"},  
    {"id": 2, "name": "商品B", "date": "2023-01-02"}  
  ]  
}  

前端与后端的参数传递

EasyUI 会自动在请求中添加分页参数 page（当前页码）和 rows（每页条数）。后端需接收这两个参数，并根据它们筛选数据。例如，使用 PHP 处理分页请求的代码片段：

$page = $_GET['page'] ?? 1;  
$rows = $_GET['rows'] ?? 10;  
$offset = ($page - 1) * $rows;  

// 数据库查询  
$query = "SELECT * FROM items LIMIT $offset, $rows";  
// ...  
echo json_encode(['total' => 150, 'rows' => $data]);  

进阶技巧：自定义分页样式与交互

自定义分页按钮与样式

通过 EasyUI 的 buttons 参数，可以添加自定义按钮（例如“跳转到第一页”）：

$(this).datagrid('getPager').pagination({  
  buttons: [{  
    text: '刷新',  
    iconCls: 'icon-reload',  
    handler: function() {  
      $('#dataGrid').datagrid('reload');  
    }  
  }]  
});  

处理分页事件

可以通过监听 onBeforeLoad 或 onSelect 等事件，实现动态逻辑。例如，当用户切换页码时，记录当前页码：

$('#dataGrid').datagrid({  
  onBeforeLoad: function(param) {  
    console.log('当前页码:', param.page);  
    console.log('每页条数:', param.rows);  
  }  
});  

常见问题与解决方案

问题1：分页组件不显示

原因：未正确设置 total 总条数，或未开启 pagination 参数。
解决方法：确保后端返回的 JSON 中包含 total 字段，并在前端调用 getPager 方法初始化分页。

问题2：数据加载后分页未更新

原因：数据更新后未重新渲染分页组件。
解决方法：在数据更新后，手动调用 pagination 方法并传入最新 total 值：

$('#dataGrid').datagrid('getPager').pagination({  
  total: newData.total  
});  

结论

通过本文的讲解，我们完成了从零搭建一个带有分页功能的数据网格的全过程。jQuery EasyUI 的分页组件不仅简化了代码逻辑，还提供了丰富的配置选项，让开发者能够灵活应对不同场景的需求。

对于初学者，建议从基础配置开始实践，逐步尝试自定义样式和事件交互。对于中级开发者，可以探索更复杂的场景，例如结合远程排序、动态调整分页参数，或与第三方 UI 库集成。

掌握这一技能后，你将能够更高效地处理海量数据展示问题，为用户提供更流畅的 Web 交互体验。接下来，不妨尝试将本文的代码示例部署到本地环境，亲身体验分页组件的神奇效果吧！