這個案例大概是半個月之前做的，由於當時做完以後覺得比較難以接受且不太好理解（代碼也比較多一點），就先將它放下了，沉澱過後，我覺得是時候拿出來與大家分享了！
整體思想框架：（我想把這些註釋拿出來會更好一些） 提前劇透一下，個人認爲數據分頁的頁碼算法是最複雜的，同時和圖片輪播一樣，關於當前頁的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數據格式：
