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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
利用js制作html table分页示例(js实现分页)
有时候table的列数太长,不利于使用者查询,所以利用JS做了一个table的分页,以下为相关代码 一.JS代码 复制代码 代码如下: <script type="text/javascript"> var pageSize = 15; //每页显示的记录条数 var curPage=0; //当前页 var lastPage; //最后页 var
-
非常不错的一个JS分页效果代码，值得研究
本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp
-
js分页显示div的内容
div分页显示_我们_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#0000
-
JS实现的简单分页功能示例
本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&
-
JS实现前端分页效果
本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 一.HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> <style type="text/css"> a{text-decoration: none;} table
-
原生JS实现酷炫分页效果
本文实例为大家分享一个如下效果的JS分页特效,是不是很酷炫. 以下是代码实现: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现酷炫分页</title> <style> * { margin: 0; padd
-
jsp分页显示的实现代码
最近这几天在做JSP留言板设计的过程中,遇到了一个问题.先看一张截图: 这是随便在一个新闻的留言页面截的图,假如留言条数太多,那整个页面得排好长好长,这就直接给用户造成了麻烦.不舒服的感受,所以,解决这个问题,通常采用分页显示的方法. 要把页面显示方式设计成这样的方式,通常需要用到这几个基本变量:pageSize(每个页面所显示的记录数).pageCount(一共有多少个页面).showPage(目前显示第几页).recordCount(总的记录数),为了方便理解,画了一张图: 如果
-
纯js分页代码(简洁实用)
复制代码 代码如下: //每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,tempPage; key=""; currentSet=0; var
-
纯javascript实现分页(两种方法)
先给大家贴效果图: 网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以就开始自己去写了.其实这个分页原理很简单,就是用ajax往后台传值(当前页码),后台使用limit进行分页. 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用 这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值
-
原生JS实现分页点击控件
这是一个面试题,要求使用原生JS实现一个分页点击控件,供大家参考,具体内容如下 1.点击首页.上一页.下一页和末页要实现相应的数字编号变红. 2.在页数1 不能够点击首页和上一页. 3.在页数10不能够点击下一页. 4.实现一个input输入页数跳转页码功能. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam