异常教程

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

更新时间:

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

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

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

前言

在 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 协作。以下是一个典型的动态加载流程：

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

完整示例

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 可以实现高度定制化的分页体验

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

最新发布

查看更多文章