做数据列表页面，分页是绕不开的一环。虽然现在Vue、React等框架盛行，但大量传统项目、后台管理系统仍然基于jQuery构建，分页插件依然是这些项目里的刚需。市面上的jQuery分页插件数量不少，质量却参差不齐，有的功能强大但体积臃肿，有的轻巧灵活却缺少文档支持。本文挑选几款经过时间检验的主流jQuery分页插件，从功能特性、使用方式、优缺点和适用场景几个维度做一次全面梳理，帮你在选型时少走弯路。
一、twbsPagination：基于Bootstrap生态的主力选手
twbsPagination是一款基于Bootstrap分页样式的jQuery插件，也是目前使用率最高的一款。它最大的特点是直接复用了Bootstrap的pagination组件样式，如果你的项目本身就用Bootstrap搭建，引入之后几乎不需要写任何CSS就能获得风格统一的分页效果。
它的初始化方式非常简洁，一个空容器加上几行配置即可运行：
$('#pagination').twbsPagination({
totalPages: 35, // 总页数
visiblePages: 7, // 可见页码数量
onPageClick: function (event, page) {
// 每次点击页码触发，page为当前页码
loadPageData(page);
}
});亮点方面：一是与Bootstrap生态无缝衔接，样式无需维护；二是提供了onPageClick回调，配合AJAX可以轻松实现服务端分页；三是支持动态销毁与重建，调用destroy方法后可以重新初始化，适合总页数会变化的场景。
不足也很明显：强依赖Bootstrap样式体系，脱离Bootstrap的项目要么引入整套样式，要么自己重写CSS；其次它只负责渲染分页条，数据加载逻辑完全要自己实现，对新手来说需要理解前后端配合的方式。总体而言，如果项目已经在用Bootstrap，它几乎是首选。
二、pagination.js：轻量灵活的国产方案
pagination.js是一款轻量级的jQuery分页插件，压缩后体积只有几KB，不依赖任何UI框架。它的API设计偏向配置化，支持的总页数、显示模式、首页尾页文案、跳转输入框等都可以通过参数控制，灵活度相当高。
基础用法如下：
$('#page').pagination({
pageCount: 50, // 总页数
jump: true, // 是否显示跳转输入框
coping: true, // 是否显示首页尾页按钮
homePageText: '首页',
endPageText: '尾页',
callback: function (api) {
var currentPage = api.getCurrent();
// 根据当前页请求服务端数据
requestData(currentPage);
}
});它的亮点在于自定义能力强。分页条的每一个部分都可以通过CSS类名覆盖样式，不依赖第三方UI库，放在任何项目里都不会产生样式冲突。跳转功能是内置的，不需要额外开发。回调函数里可以通过api对象拿到当前页码，实现服务端分页也比较方便。
不足之处在于文档以中文为主，国际化程度一般；极端定制需求下需要阅读源码才能实现；另外它对移动端响应式的支持需要自己额外处理，插件本身没有内置移动端适配逻辑。适合对体积敏感、样式要求自主可控的项目。
三、jqPagination：极简风格的代表
jqPagination走的是极简路线，整个分页条只有上一页、下一页和一个页码输入区域，用户可以直接在输入框里填写页码按回车跳转。这种交互在数据量大、页数多的场景下效率很高，因为用户不需要在一长串页码里来回找目标页。
使用示例：
$('.pagination').jqPagination({
max_page: 40,
paged: function (page) {
console.log('用户跳转到第 ' + page + ' 页');
fetchList(page);
}
});它的优点是体积小、上手快、交互独特，特别适合页数可能达到几百上千页的报表类页面。缺点是功能相对单一，没有传统的页码列表展示，习惯常规分页交互的用户可能不适应；插件更新维护频率较低，遇到兼容性问题需要自己动手改源码。
四、选型建议与对比总结
综合来看，几款插件各有定位。下面通过一个简单的对比表格帮助快速决策：
| 插件 | 体积 | 依赖 | 跳转功能 | 适用场景 |
|---|---|---|---|---|
| twbsPagination | 较小 | Bootstrap样式 | 不支持 | Bootstrap项目、后台管理系统 |
| pagination.js | 极小 | 无 | 内置支持 | 轻量项目、需要深度定制样式 |
| jqPagination | 极小 | 无 | 核心交互 | 页数极多的报表、数据查询页 |
给几条具体的选型建议：第一，项目已经使用Bootstrap，直接选twbsPagination，省时省力；第二，对页面体积和样式自主性要求高，pagination.js更合适；第三，页码数量特别庞大、用户习惯直接输页码的场景，可以考虑jqPagination。另外要提醒一点，无论选哪款插件，都要注意分页数据的安全性——服务端必须对页码和每页条数做校验，不能信任前端传来的任何分页参数，否则容易被人恶意构造大偏移量拖垮数据库查询。
最后补充一点经验：如果项目允许，也可以考虑把这些插件的分页逻辑自己封装一层，对外暴露统一的init和gotoPage接口。这样一来，将来即使更换插件甚至迁移到Vue、React，业务代码也不用大改。分页看似是个小功能，但接口设计得好，能省下不少后期维护成本。
希望这份解析能帮助你在实际项目中做出合适的选择。分页插件本质上没有绝对的好坏，关键在于匹配项目的技术栈和团队的维护习惯。
jQuery分页插件分页组件前端分页修改时间：2026-09-13 23:12:51