js实现简单的前端分页效果
更新时间：2021年08月12日 10:25:04 作者：凌晨 || AmsWait
这篇文章主要为大家详细介绍了js实现简单的前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
有些项目业务比较简单，但用到前端分页的地方又比较多，插件的体积比较难控制用起来也麻烦，所以自己写一个简易的。
实现思路
通过 jQuery.slice() 选择子集的区间元素， 然后控制显示隐藏来实现；
假设每页显示数量为x，当前页码为y，元素索引从0开始，那么显示的区间即为 x(y-1) 到 xy。
效果演示
demo代码
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了javascript实现贪吃蛇，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
今天小编就为大家分享一篇layui 设置table 行的高度方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
好久没有搞网页了，今天重新弄了一个 ，做个动态表格，具体的实现代码，大家可以自己写吧2008-12-12
本文主要分享了canvas红包照片的实例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
下面小编就为大家带来一篇深入理解JS addLoadEvent函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了微信小程序App生命周期的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
本文主要对自动生成博客目录的具体实现方法进行介绍，需要的朋友可以看看2016-12-12
关于vite + ts 找不到模块@/xxxx 或其相应的类型声明问题
这篇文章主要介绍了vite + ts 找不到模块@/xxxx 或其相应的类型声明,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了使用JS实现一个Sleep函数,实现 sleep 函数其实非常简单，主要是理解 JavaScript 中异步执行情况，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Javascript 闭包详解及实例代码的相关资料,闭包是一个特别抽象的概念，特别是ECMA规范给的定义，如果没有实战经验，很难从定义去理解它，需要的朋友可以参考下2016-11-11
最新评论