在Web前端开发中，分页是列表展示的必备功能。常规做法是点击页码后整个页面跳转刷新，用户体验比较生硬。如果希望在不刷新页面的前提下动态切换数据，jQuery Pagination插件可以大幅简化工作量。它本身只负责页码的生成与点击事件，具体的数据加载逻辑需要开发者通过回调函数自己实现，因此灵活度很高。
下面先介绍插件的基础用法，再深入Ajax无刷新请求和页码样式定制，最后给出一个可直接运行的完整页面。整个过程中会涉及一些常见问题，例如页码索引从0还是1开始、如何重置分页、以及样式覆盖时需要注意的细节。
一、jQuery Pagination插件的基础初始化
jQuery Pagination是一个依赖jQuery的轻量插件，核心文件只有一个jquery.pagination.js。使用时需要先引入jQuery库，再引入该插件。HTML结构只需要一个空的div容器，插件会把页码渲染到这个容器内部。最简单的初始化代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pagination Demo</title>
<link rel="stylesheet" href="pagination.css">
</head>
<body>
<div id="pagination"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="jquery.pagination.js"></script>
<script>
$('#pagination').pagination({
totalData: 100,
showData: 10,
current: 1,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上一页',
nextContent: '下一页'
});
</script>
</body>
</html>
在上面的代码中，totalData表示数据总条数，showData是每页显示条数，current是初始当前页。插件会根据这三个参数自动计算总页码数。coping开启后页码数量过多时会自动省略中间部分，只显示首尾和当前页附近页码。几个文本参数用于自定义首页、末页、上一页和下一页的显示文字。如果这些参数不设置，插件会使用默认的英文标识，导致中文项目中显示不一致，所以建议显式配置。
这里需要特别注意，不同版本的jQuery Pagination插件参数名略有区别。部分旧版本使用total、display等名称，但主流的1.x版本已经统一为totalData和showData。在实际使用时，最好先查看对应版本的文档，确认参数拼写，否则初始化不会报错但分页不显示，排查起来比较费时。
初始化完成后，页面上会生成类似上一页 1 2 3 4 5 下一页的页码结构。但如果此时点击页码，页面并不会有任何反应，因为还没有绑定数据加载逻辑。这正是下一步要解决的问题——通过回调函数发起Ajax请求。
二、Ajax无刷新分页的回调与数据渲染
插件提供了一个callback参数，它会在用户点击页码或上一页/下一页按钮时被调用。回调函数的参数通常是当前页码（从1开始）。在这个回调里，开发者需要发起Ajax请求，向后端获取对应页的数据，然后把返回结果渲染到列表区域。一个典型的实现如下：
function loadData(page) {
$.ajax({
url: '/api/articles',
type: 'GET',
data: {
page: page,
pageSize: 10
},
beforeSend: function () {
// 显示加载提示，避免用户重复点击
$('#loading').show();
},
success: function (res) {
var html = '';
res.data.forEach(function (item) {
html += '<li>' + item.title + '</li>';
});
$('#article-list').html(html);
// 如果服务端返回了总条数，可以动态更新分页
if (res.total !== undefined) {
$('#pagination').pagination('setTotalData', res.total);
}
},
error: function () {
alert('数据加载失败，请稍后重试');
},
complete: function () {
$('#loading').hide();
}
});
}
$('#pagination').pagination({
totalData: 0,
showData: 10,
current: 1,
callback: function (page) {
loadData(page);
}
});
// 页面加载时先请求第一页
loadData(1);
这段代码展示了几个关键点。第一，callback接收的page是从1开始的页码，直接作为请求参数传给后端即可。第二，在请求过程中通过beforeSend和complete控制加载指示器的显示与隐藏，可以防止用户在请求未完成时频繁点击页码导致重复请求。第三，如果后端返回了数据总条数，可以调用插件提供的setTotalData方法动态更新分页组件，这样当数据总量变化时页码会自动重新计算，无需重新初始化。
一个常见的坑是：初始化的totalData如果设置为0，插件会认为没有数据，可能只显示一页甚至不显示页码。所以通常的做法是先设置一个预估总条数，等第一次Ajax返回真实总条数后再调用setTotalData更新。另一种做法是在初始化前先同步请求一次总条数，再初始化插件，但这样会多一次请求，影响首屏速度。推荐使用动态更新的方式。
另外需要注意，回调函数中如果直接使用this，它指向的是分页插件内部的对象，而不是点击的页码元素或全局对象。如果要获取当前页码，一律使用回调传入的参数，不要依赖this，否则在严格模式或经过打包压缩后可能出现不可预期的结果。
三、页码样式定制与外观调整
jQuery Pagination插件生成的HTML结构带有固定的CSS类名，例如.pagination、.active、.disabled、.jump等。默认样式比较朴素，通常需要根据项目设计稿进行调整。可以通过自定义CSS来覆盖默认样式，不需要修改插件源码。
下面是一组常见的自定义样式，将默认的直角页码改为圆角、设置选中状态背景色、统一按钮高度等：
#pagination .pagination {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 20px 0;
}
#pagination .pagination li {
min-width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border: 1px solid #ddd;
border-radius: 6px;
cursor: pointer;
background: #fff;
color: #333;
transition: all 0.2s;
}
#pagination .pagination li.active {
background: #2d8cf0;
border-color: #2d8cf0;
color: #fff;
cursor: default;
}
#pagination .pagination li.disabled {
opacity: 0.5;
cursor: not-allowed;
}
#pagination .pagination li:hover:not(.active):not(.disabled) {
border-color: #2d8cf0;
color: #2d8cf0;
}
使用这些样式前要确认分页容器#pagination的唯一性，避免全局污染。如果页面上有多个分页组件，可以为每个容器添加不同的ID或类名，再分别定义样式。另外，插件的homePage、endPage等自定义文本对应的li元素也可以单独通过伪类或额外类名调整，比如让首页/末页按钮有特殊的背景色。
在实际项目中，样式覆盖不生效是常见问题之一。排查时先确认CSS选择器优先级是否足够高，例如插件自带的样式可能使用了.pagination li.active，如果自定义样式只写了li.active，可能因为优先级不够而被覆盖。建议使用更具体的选择器，或者直接使用!important（不推荐大量使用）。另一个问题是CSS文件加载顺序：自定义样式表要放在插件样式表之后，才能确保覆盖生效。
四、完整示例与进阶优化建议
下面给出一个完整的HTML页面，整合了上述初始化、Ajax加载和样式定制的代码。为了便于本地测试，数据请求使用了模拟的JSON接口，实际开发中替换为真实API即可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery Pagination Ajax无刷新分页示例</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; }
#article-list { list-style: none; padding: 0; }
#article-list li { padding: 12px; border-bottom: 1px solid #eee; }
#loading { display: none; color: #999; margin: 10px 0; }
#pagination .pagination { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
#pagination .pagination li { min-width: 36px; height: 36px; line-height: 36px; text-align: center; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; }
#pagination .pagination li.active { background: #2d8cf0; border-color: #2d8cf0; color: #fff; cursor: default; }
#pagination .pagination li.disabled { opacity: 0.5; cursor: not-allowed; }
</style>
</head>
<body>
<h1>文章列表</h1>
<div id="loading">加载中...</div>
<ul id="article-list"></ul>
<div id="pagination"></div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="jquery.pagination.js"></script>
<script>
// 模拟后端数据
var mockData = [];
for (var i = 1; i <= 87; i++) {
mockData.push({ id: i, title: '第' + i + '篇文章标题' });
}
function renderList(page, pageSize) {
var start = (page - 1) * pageSize;
var end = start + pageSize;
var list = mockData.slice(start, end);
var html = '';
list.forEach(function (item) {
html += '<li>' + item.title + '</li>';
});
$('#article-list').html(html);
}
function initPagination(total) {
$('#pagination').pagination({
totalData: total,
showData: 10,
current: 1,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上一页',
nextContent: '下一页',
callback: function (page) {
renderList(page, 10);
}
});
}
// 初始化：先渲染第一页，再初始化分页
renderList(1, 10);
initPagination(mockData.length);
</script>
</body>
</html>
在这个示例中，数据直接保存在前端数组里，通过slice模拟分页查询。实际项目中，把renderList函数内部的逻辑替换成$.ajax请求即可。另外，示例中没有动态更新totalData，因为总条数是固定的。如果数据量会变化，可以在Ajax成功后调用$('#pagination').pagination('setTotalData', res.total)，同时重新渲染当前页数据。
进阶优化方面，可以考虑加入页码跳转输入框、每页条数选择器、以及URL参数同步（例如把当前页码写入location.hash，方便刷新后保持页码）。此外，如果列表数据渲染使用了Vue或React等框架，需要确保数据更新后分页插件的DOM不被框架重新渲染破坏。通常可以把分页容器放在框架管理范围之外，或者使用框架对应的分页组件替代。对于传统jQuery项目，本文的方案已经足够稳定可靠。
jQuery PaginationAjax分页页码样式定制修改时间：2026-09-01 09:20:49