首页
/ 正文

jQuery EasyUI 基础插件 – Pagination 分页（长文讲解）

更新时间: 2025-04-03 20:08:52

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 开发中，分页功能是数据展示的核心需求之一。无论是用户浏览商品列表、查看日志记录，还是处理海量数据，分页都能显著提升用户体验和系统性能。jQuery EasyUI 作为一款功能强大的前端 UI 框架，其内置的 Pagination 分页插件提供了简洁易用的 API，能够快速实现优雅的分页效果。本文将从零开始讲解 Pagination 的核心概念、配置方法和实战应用，帮助开发者高效掌握这一实用工具。

什么是 Pagination 分页插件？

Pagination 分页插件是 jQuery EasyUI 提供的一个轻量级组件，用于将数据按照固定数量分割成多个页面，并提供导航控件供用户切换页码、调整页容量。它支持自定义页码样式、动态加载数据，并且能够与其他 EasyUI 组件（如 Datagrid）无缝集成。

形象比喻：
可以将分页功能想象为图书馆的书架。假设一本巨著被拆分成多个章节，每个书架（页面）放置一定数量的章节（数据条目）。分页插件的作用，就是为用户提供一个“书架导航器”，让他们能快速跳转到目标章节，而无需翻阅整本书。

核心配置参数详解

1. 基础配置项

使用 Pagination 插件时，开发者需要通过 options 对象定义分页行为。以下是最常用的配置参数：

参数名	说明	默认值
`total`	总数据条数	`0`
`pageNumber`	当前页码（从 `1` 开始计数）	`1`
`pageSize`	每页显示的数据条目数	`10`
`pageList`	可选的每页条目数列表（如 `[10, 20, 50]`）	`[]`
`showPageList`	是否显示页容量选择框	`true`
`showRefresh`	是否显示刷新按钮	`false`
`layout`	分页控件的布局（如 `[prev, next, links, first, last]`）	`[prev, next, links, first, last]`

2. 配置示例

以下代码展示了如何通过 HTML 和 JavaScript 初始化一个基础分页控件：

<!-- HTML 结构 -->  
<div id="pagination"></div>  

<script>  
$(function() {  
  // 初始化分页插件  
  $('#pagination').pagination({  
    total: 100,               // 总数据条数  
    pageNumber: 1,           // 初始页码  
    pageSize: 10,            // 每页显示数量  
    pageList: [10, 20, 30],  // 可选的页容量  
    showPageList: true,      // 显示页容量选择框  
    layout: [  
      'first', 'prev', 'links', 'next', 'last',  
      'sep', 'list', 'sep', 'info'  
    ]  
  });  
});  
</script>

分页事件与回调函数

分页插件提供了多个事件钩子，允许开发者在用户触发分页操作时执行自定义逻辑。

1. 常用事件

事件名	触发时机	参数说明
`beforePageText`	页码显示前的文本（如“第”）	字符串类型
`afterPageText`	页码显示后的文本（如“页”）	字符串类型
`displayMsg`	显示当前页的提示信息（如“共 100 条”）	字符串类型，支持占位符
`onSelect`	用户点击页码时触发	返回选中的页码
`onBeforeRefresh`	用户点击刷新按钮前触发	无参数
`onRefresh`	用户点击刷新按钮后触发	无参数

2. 事件绑定示例

以下代码展示了如何监听页码选择事件，并在控制台输出当前页码：

$('#pagination').pagination({  
  ...其他配置...,  
  onSelect: function(pageNumber, pageSize) {  
    console.log('当前页码:', pageNumber);  
    console.log('每页数量:', pageSize);  
    // 可在此处触发数据加载请求  
    loadPageData(pageNumber, pageSize);  
  }  
});

数据绑定与动态加载

分页插件本身不负责数据加载，而是通过事件和回调与后端 API 协作。以下是一个典型的动态加载流程：

初始化分页控件：根据后端返回的总数据条数设置 total 参数。
监听页码变化：在 onSelect 事件中触发 AJAX 请求，获取对应页码的数据。
更新视图：将后端返回的数据渲染到页面中。

完整示例

function initPagination() {  
  $.ajax({  
    url: '/api/data/count',  
    success: function(response) {  
      const total = response.total;  
      $('#pagination').pagination({  
        total: total,  
        onSelect: function(pageNumber, pageSize) {  
          fetchPageData(pageNumber, pageSize);  
        }  
      });  
    }  
  });  
}  

function fetchPageData(pageNumber, pageSize) {  
  $.ajax({  
    url: '/api/data/list',  
    data: {  
      page: pageNumber,  
      size: pageSize  
    },  
    success: function(data) {  
      renderData(data); // 渲染数据到页面  
    }  
  });  
}

进阶技巧与常见问题

1. 自定义分页样式

通过 CSS 可以轻松覆盖默认样式，例如：

.pagination-panel .numbers li {  
  background-color: #f0f0f0;  
  border: 1px solid #ccc;  
  margin-right: 5px;  
}  

.pagination-panel .numbers li.selected {  
  background-color: #4CAF50;  
  color: white;  
}

2. 动态调整分页参数

若总数据条数在运行时发生变化（如筛选操作后），可以通过 options 方法更新分页控件：

$('#pagination').pagination('options', {  
  total: newTotal,  
  pageNumber: 1 // 重置为第一页  
});

3. 移动端适配

在响应式设计中，可通过媒体查询调整分页布局：

@media (max-width: 768px) {  
  .pagination-panel .numbers {  
    display: none; // 隐藏页码链接，仅保留翻页按钮  
  }  
}

案例实战：实现带筛选的分页列表

1. 功能需求

构建一个包含以下功能的分页列表：

支持页码切换和页容量选择
提供关键字搜索和分类筛选
动态更新分页控件和数据

2. HTML 结构

<div class="search-panel">  
  <input type="text" id="search-key" placeholder="搜索关键词">  
  <select id="category">  
    <option value="">全部分类</option>  
    <option value="1">科技</option>  
    <option value="2">生活</option>  
  </select>  
  <button onclick="refreshData()">刷新</button>  
</div>  

<table id="data-table">  
  <!-- 数据渲染区域 -->  
</table>  

<div id="pagination"></div>

3. JavaScript 实现

let currentPage = 1;  
let pageSize = 10;  

function refreshData() {  
  const key = $('#search-key').val();  
  const category = $('#category').val();  

  // 重新加载数据并更新分页控件  
  fetch('/api/data/count', {  
    params: { key, category }  
  }).then(response => {  
    const total = response.total;  
    $('#pagination').pagination({  
      total: total,  
      onSelect: function(page, size) {  
        currentPage = page;  
        pageSize = size;  
        loadData();  
      }  
    });  

    loadData(); // 初始加载第一页  
  });  
}  

function loadData() {  
  const key = $('#search-key').val();  
  const category = $('#category').val();  

  fetch('/api/data/list', {  
    params: {  
      page: currentPage,  
      size: pageSize,  
      key,  
      category  
    }  
  }).then(data => {  
    // 渲染表格数据到 #data-table  
    renderTable(data);  
  });  
}

结论

通过本文的讲解，读者已经掌握了 jQuery EasyUI Pagination 分页插件的核心配置、事件处理和数据绑定方法。从基础参数到动态交互，再到实际案例，分页插件的灵活性和易用性得到了充分展示。开发者可以根据业务需求，进一步扩展样式、优化交互逻辑，甚至与 EasyUI 的其他组件（如 Datagrid、Combo Box）结合，构建出功能完善的 Web 应用。

关键词回顾：jQuery EasyUI 基础插件 – Pagination 分页
技术要点总结：

分页插件通过 total、pageNumber、pageSize 等参数定义基础行为
事件回调（如 onSelect）是实现动态数据加载的关键
结合 CSS 和 JavaScript 可以实现高度定制化的分页体验

希望本文能帮助开发者快速上手这一工具，为项目开发提供高效支持。

jQuery EasyUI 基础插件 – Pagination 分页（长文讲解）

前言

什么是 Pagination 分页插件？

核心配置参数详解

1. 基础配置项

2. 配置示例

分页事件与回调函数

1. 常用事件

2. 事件绑定示例

数据绑定与动态加载

完整示例

进阶技巧与常见问题

1. 自定义分页样式

2. 动态调整分页参数

3. 移动端适配

案例实战：实现带筛选的分页列表

1. 功能需求

2. HTML 结构

3. JavaScript 实现

结论

最新发布

jQuery EasyUI 树形菜单 – 树形网格添加分页（建议收藏）

jQuery EasyUI 树形菜单 – 树形网格惰性加载节点（保姆级教程）

jQuery EasyUI 表单 – 创建异步提交表单（长文解析）

jQuery EasyUI 表单 – 表单验证（长文解析）

jQuery EasyUI 表单 – 创建树形下拉框（ComboTree）（长文解析）

jQuery EasyUI 表单 – 格式化下拉框（ComboBox）（超详细）

jQuery EasyUI 表单 – 过滤下拉数据网格（ComboGrid）（一文讲透）

jQuery EasyUI 窗口 – 创建简单窗口（超详细）

jQuery EasyUI 基础插件 – Parser 解析器（手把手讲解）

jQuery EasyUI 基础插件 – Easyloader 加载器（手把手讲解）