针对业务简单且分页需求频繁的项目，本文介绍一种基于jQuery的轻量级前端分页方案。通过jQuery.slice()方法精确计算并截取指定区间的元素，配合显示隐藏控制实现分页效果。该方法无需引入大型插件，代码体积小且易于集成，适合对性能有特定要求的场景。
部分项目业务逻辑相对简单，但前端页面中涉及分页的场景却较为频繁。由于第三方插件体积较大且配置繁琐，自行开发一个简易的分页组件成为更优选择。
实现思路
核心逻辑是利用 jQuery.slice() 方法选取特定区间的子集元素，并通过控制元素的显示与隐藏来呈现分页效果。设定每页显示数量为 x，当前页码为 y，且元素索引从 0 开始计数，则当前页需显示的区间范围即为 x(y-1) 到 xy。
效果演示
相关示例代码详见下文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端分页实现demo</title>
</head>
<body>
<div class="parent">
<ul class="box" style="min-height: 147px;">
</ul>
<div class="page-box">
<button class="page-btn prev">上一页</button>
<span class="page-num">1/1</span>
<button class="page-btn next">下一页</button>
</div>
</div>
<div class="parent">
<ul class="box2" style="min-height: 63px;">
</ul>
<div class="page-box">
<button class="page-btn prev">上一页</button>
<span class="page-num">1/1</span>
<button class="page-btn next">下一页</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
/**
* 分页初始化
* @param {*} eleBox 需要被分页的容器
* @param {*} size 每页的条数
*/
function InitPagination(eleBox, size) {
var box = $(eleBox),
children = box.children(),
total = children.length,
pageBox = box.next(),
pageNum = pageBox.find('.page-num'),
maxNum = !Math.ceil(total / size) ? 1 : Math.ceil(total / size);
pageNum.text('1/' + maxNum);
children.hide();
children.slice(0, size).show();
pageBox.off().on('click', '.prev, .next', function (e) {
var nowNum = parseInt(pageNum.text().split('/')[0]);
if ($(this).hasClass('prev')) {
nowNum--;
if (nowNum < 1) {
nowNum = 1
return;
}
} else {
nowNum++;
if (nowNum > maxNum) {
nowNum = maxNum
return;
}
}
children.hide();
children.slice(size * (nowNum - 1), nowNum * size).show();
pageNum.text(nowNum + '/' + maxNum);
})
}
// 模拟数据写入
var box = $('.box'), box2 = $('.box2'), li = '';
for (let i = 0; i < 16; i++) {
li += '<li>' + i + '</li>'
}
box.html(li);
box2.html(li);
// 实例化分页器
new InitPagination(box, 7)
new InitPagination(box2, 3)
</script>
</body>
</html>以上内容即为本文的全部分享，希望能为读者的学习提供有益参考，同时也感谢大家的支持。