版权声明：转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/86683903
这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！
整体思想框架：（我想把这些注释拿出来会更好一些） 提前剧透一下，个人认为数据分页的页码算法是最复杂的，同时和图片轮播一样，关于当前页的bug会比较多，毕竟到达所需页的执行方式有多种（点击翻页页、点击页数、点击跳转页、三者混合操作），所以就需要我们用心一点，耐心的调试bug，毕竟，bug是不可能一次改完的，尤其是第一次做的话，不要怕有bug，多利用打断点调试和console.log() 调试，你会更加深刻的理解这一切！
-
// 总体思想 在每页上显示定量的数据，通过点击具体的页数以及翻页和跳转来实现翻页的效果
- // 利用面向对象的开发方法，将所需的变量定义，然后根据需要去调用
- // 建立计算总页数函数、当前页函数、创建页面数据函数、创建点击类总函数、创建页数显示函数
- // 进行元素之间的相互调用 首先实现在页面上显示初始页的值和实现下方翻页按钮的功能（跳转由于需要多页测试，可以最后再写）
- // 然后在按钮上绑定点击事件，完成翻页的功能
- // 测试，调试bug
- // 实现其它的附加功能
实现效果：
具体代码：
基本页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据分页</title>
<style>
.block{
position: relative;
margin: 0 auto;
width: 1190px;
height: 600px;
border: 1px solid silver;
}
.title ul{
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(#b5faff,deepskyblue);
position: relative;
}
.title li{
list-style: none;
float: left;
width: 119px;
height: 40px;
line-height: 40px;
text-align: center;
}
#content{
width: 1190px;
height: 500px;
position: relative;
}
.user-data ul{
background: transparent !important;
border-bottom: 1px solid silver;
}
.user-data ul li{
height: 30px !important;
line-height: 30px !important;
font-size: 13px;
}
.buttonNumber{
overflow: hidden;
padding: 15px 20px
}
.totle{
display: block;
float: left;
width: 60px;
height: 30px;
border: 1px solid #f3f3f3;
text-align: center;
line-height: 30px;
font-size: 13px;
}
.topPage,.downPage{
width: 70px;
height: 30px;
outline: none;
border:1px solid #f3f3f3;
float: left;
margin: 0 5px;
font-size: 13px;
background-color: transparent;
}
.btnNumber{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
}
.btnNumber>li{
list-style: none;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
margin: 0 2px;
border: 1px solid #f3f3f3;
font-size: 13px;
cursor: pointer;
}
.gopage span{
display: block;
float: left;
font-size: 13px;
line-height: 30px;
width: 40px;
height: 30px;
border: 1px solid #f3f3f3;
text-align: center;
}
.txtnum{
float: left;
width: 30px;
height: 28px;
outline: none;
border: 1px solid #f3f3f3;
text-align: center;
}
.gopage button{
width: 70px;
height: 30px;
outline: none;
border:1px solid #f3f3f3;
float: left;
margin: 0 10px;
font-size: 13px;
background-color: transparent;
}
#userover {
background-color: #fdeaff;
color: #00aaff;
}
#userleave {
background-color: transparent;
color: black;
}
</style>
</head>
<body>
<div class="block">
<div class="title">
<ul>
<li>序号</li>
<li>姓名</li>
<li>性别</li>
<li>年龄</li>
<li>地址</li>
<li>电话</li>
<li>QQ</li>
<li>Email</li>
<li>毕业 (是/否)</li>
<li>结婚 (是/否)</li>
</ul>
</div>
<div id="content">
</div>
<div class="buttonNumber">
<span class="totle">共<span>0</span>页</span>
<button class="topPage">上一页</button>
<ul class="btnNumber">
</ul>
<button class="downPage">下一页</button>
<div class="gopage">
<span>到第</span>
<input class="txtnum" value="1" type="text"/>
<span>页</span>
<button id="choose">确定</button>
</div>
</div>
</div>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>
</body>
</html>js代码：
(function (){
//pageNum=10(一页的数据) pageTotal（总页数） Data 总数据 pageNow(当前页) DataCount 总数据量 PageDataArray 当前页的数据
var paging={
pageNum: 10,
pageNow: 1,
pageTotal:0,
Data:allData,
DataCount:allData.length,
PageDataArray:[],
ElementDiv:[],
TotlePage: function(){
// this.pageTotal=Math.ceil(this.DataCount/this.pageNum);
// Math.ceil为向上取整
if(this.DataCount%this.pageNum==0){
this.pageTotal=parseInt(this.DataCount/this.pageNum);
}
else{
this.pageTotal=parseInt(this.DataCount/this.pageNum+1);
}
//这两个都可以用，只不过第二个比较底层。第一个比较简单
// console.log(this.pageTotal);计算出总页数
},
pageNowData: function (page) {
var index = (page - 1) * this.pageNum;//转化为索引 但我在考虑是否为必要，是否可以直接对pagenow操作
// console.log(typeof(index));
// console.log(typeof(this.pageNow));
this.PageDataArray = this.Data.slice(index, index + this.pageNum);//因为splice会对字符串本身产生影响，所以用slice
// 思路为，一页显示pageNum组数据，page从第一页开始，但取数据从零开始
//调用数据绑定的方法
// PageDataArray为此页的数据集合
// console.log(this.Data);
this.DataToElement();
},
CreateElement: function () {
/*动态创建10组元素*/
// 只创建一次dom元素而不是每次取数据的时候都重新创建
for (var i = 0; i < this.pageNum; i++) {
var Data_parEle = document.createElement("div");
Data_parEle.className = "title user-data";
var ul_par = document.createElement("ul");
for (var k = 0; k < 10; k++) {
var li_child = document.createElement("li");
li_child.innerHTML = "";
ul_par.appendChild(li_child);
}
// 建立10组div——ul——10*li，并将li设为ul的子集
// appendChild() 追加子集
Data_parEle.appendChild(ul_par);
// 将ul设为div的子集
document.getElementById("content").appendChild(Data_parEle);
// 将创建的整套div设为 id为content的div中
this.ElementDiv.push(Data_parEle);
console.log(this.ElementDiv);
// push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
Data_parEle.addEventListener("mouseover", function () {
this.setAttribute("id", "userover");
});
Data_parEle.addEventListener("mouseleave", function () {
this.setAttribute("id", "userleave");
});
// 添加用户交互事件 鼠标离开 鼠标进入
}
},
DataToElement: function () {
// 将原始数据中的true 显示为是、 false显示为否
// 如果没有数据，隐藏没有数据的样式
for (var i = 0; i < this.ElementDiv.length; i++) {
var lichild = this.ElementDiv[i].children[0].children;
if (this.PageDataArray[i] == undefined) {
this.ElementDiv[i].style.display = "none";
}
else {
this.ElementDiv[i].style.display = "block";
// 防止用户从数据不全的页回到数据完全的页而无法全部显示的bug
var index = 0;
for (var key in this.PageDataArray[i]) {
lichild[index].innerHTML = this.PageDataArray[i][key] == true ? "是" : this.PageDataArray[i][key] == false ? "否" : this.PageDataArray[i][key];
index++;
// i为索引 key 为键值对 例如ID name 之类
// 关键之处，将之前分好的数据与写好的div绑定
}
}
}
},
NumBerInfo:function(){
document. getElementsByClassName ('totle')[0].children[0].innerHTML=this.pageTotal;
// 将总页数给span赋值
var btnNumber=document.getElementsByClassName('btnNumber')[0];
// console.log(btnNumber);
btnNumber.innerHTML=this.pageNumberli(this.pageNow,this.pageTotal);
var oldcolor=btnNumber.children[0];
oldcolor.style.backgroundColor = "#1D9DEE";
oldcolor.style.color="white";
// 默认的块的颜色为white 背景色为蓝色 （#1D9DEE）
//利用算法 实现块的颜色的改变 算法会创建各种块 比较难理解
var that=this;
btnNumber.onclick=function(){
var new_li=event.target;
// console.log(new_li.nodeName);
// new_li.nodeName 为大写，所以要用大写判断
if(new_li.nodeName=='LI'){
if(new_li.getAttribute('data-nobtn')){
return;
// 对于块 ' ... '直接跳过
}
oldcolor.style.backgroundColor="transparent";
oldcolor.style.color="black";
new_li.style.backgroundColor="#1D9DEE";
new_li.style.color='white';
oldcolor=new_li;
that.pageNow=new_li.innerHTML;
// console.log(new_li);
that.pageNowData(new_li.innerHTML);
}// 用现在的颜色来替换之前的颜色
}
var downPage=document.getElementsByClassName('downPage')[0];
// 下一页按钮
downPage.onclick=function(){
if(that.pageNow>=that.pageTotal){
return;
// 如果当前页为最大页数，返回，即不执行onclick
}
that.pageNow++;
// console.log(that.pageNow);
btnNumber.innerHTML=that.pageNumberli(that.pageNow,that.pageTotal);
// 重新计算翻页按钮
oldcolor = document.getElementById("libg");
// 当前页的颜色已经写好
that.pageNowData(that.pageNow);
// 调用pageNowData() 来显示当前页的数据
}
var topPage=document.getElementsByClassName('topPage')[0];
topPage.onclick=function(){
// 下一页按钮 原理同上
if(that.pageNow<=1){
// 如果当前页数小于等于1,不执行onclick
return;
}
that.pageNow--;
btnNumber.innerHTML=that.pageNumberli(that.pageNow,that.pageTotal);
oldcolor = document.getElementById("libg");
that.pageNowData(that.pageNow);
}
var choose=document.getElementById('choose');
// choose 为点击 跳转 来实现翻页功能
var choose_value=document.getElementsByClassName('txtnum')[0];
// console.log(choose_value.value);
choose.onclick=function(){
that.pageNowData(choose_value.value);
btnNumber.innerHTML = that.pageNumberli(parseInt(choose_value.value), that.pageTotal);
that.pageNow = parseInt(choose_value.value);
}
},
pageNumberli:function(cur_page,totle_page){
// 翻页按钮的算法
// cur_page 为当前页数 totle_page为总页数
var res = "";
// 12345
// 1...17 18 19 20
// 1... 12 13 14 15 16...20
// 没有判断的话，会直接建立总页数个页码块
for (var i = 1; i <= totle_page; i++) {
// 页数从第一页开始
if (i == 2 && cur_page -5> 1) {//前缩页
// 根据规律，第一页和第十九页会直接显示出来
// cur_page - 5 > 1 代表缩页从当前页的后6页开始，且当前页数大于6时是才会缩页
i = cur_page - 5;//直接跳到当前页 -5 也就是开始缩页之后的地方
res += "<li data-nobtn='true'>...</li>";//显示缩页的符号
}
else if (i == cur_page + 5 && cur_page + 5 < totle_page) {//后缩页
i = totle_page - 1;
// 缩页位置在总页数的倒数第二个
// 其它按照前缩页理解
res += "<li data-nobtn='true'>...</li>";
}
else {
if (i == cur_page) {
res += "<li id='libg' style='background-color: #1D9DEE; color: white;'>" + i + "</li>";
}
else {
res += "<li>" + i + "</li>";
}
}
}
return res;
}
}
paging.TotlePage();
paging.CreateElement();
paging.pageNowData(1);//默认页数为1
paging.NumBerInfo();
}
)()js数据格式：
