javascript實現(xiàn)前端分頁功能

更新時間：2021年08月20日 13:23:11 作者：末安

這篇文章主要為大家詳細介紹了javascript實現(xiàn)前端分頁功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言：今天給大家?guī)淼氖乔岸藬?shù)據(jù)的分頁功能，供大家參考，具體內容如下

先上一波效果圖展示：

直接上代碼：這里使用的是JavaScript來實現(xiàn)

關于代碼詳解都以注釋的方式寫在JavaScript里的

HTML：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>分頁</title>
 <link rel="stylesheet" href="css/limitFace.css" >
 </head>
 <body>
 <div class="all">
  <table id="table">
  
  </table>
  <div id="inputs">
  
  </div>
 </div>
 <script src="js/limitFace.js"></script>
 </body>
</html>

CSS:

*{
 padding: 0;
 margin: 0;
 font-size: 20px;
}
.all{
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}
/*偷懶才用的id*/
#inputs input{
 width: 100px;
 height: 50px;
 background-color: white;
}
#table{
 width: 90%;
}
tr{
 width: 100%;
}
td{
 text-align: center;
 width: 50%;
 height: 10vh;
 border: 1px solid black;
}

JS:

//一下數(shù)據(jù)為模擬集合，個人理解js中的集合就是將對象放進數(shù)組
var strs = [
 {
 "id":123,
 "pwd":456
 },
 {
 "id":456,
 "pwd":123
 },
 {
 "id":4681,
 "pwd":9815
 },
 {
 "id":471,
 "pwd":4981
 },
 {
 "id":1234789,
 "pwd":156
 },
 {
 "id":789,
 "pwd":158
 },
 {
 "id":"vgwh",
 "pwd":"vgsya"
 },
 {
 "id":1,
 "pwd":"tcv"
 },
 {
 "id":256,
 "pwd":"vtc0"
 }
];
//假設規(guī)定每頁顯示長度為3
var len = 3;
//確認該集合會被分成幾頁，分成幾頁就代表需要幾個頁面按鈕,封裝封裝方便多次運用
function limits(){
 var countLim = Math.ceil(strs.length/len);//余數(shù)也算是一頁，這里用向上取整
 //確認頁面按鈕個數(shù)，進行循環(huán)顯示到頁面上
 document.getElementById("inputs").innerHTML='';//清空一下
 for(var i=1;i<=countLim;i++){
 document.getElementById("inputs").innerHTML+='<input type="button" value="'+i+'" onclick="limitinput(this)"/>';//每個頁面按鈕都綁定上一個點擊事件
 }
}
var choose = 0;//創(chuàng)建一個全局變量用來保存當前處于第幾個頁面
//點擊按鈕獲取當前按鈕的值進行選擇當前table是第幾頁數(shù)據(jù)
function limitinput(ids){
 choose = ids.value;
 tablestr(choose);//刷新table數(shù)據(jù)
 limits();//刷新頁面按鈕
  ids.style.backgroundColor='red';//當前點擊的頁面按鈕背景顏色改變?yōu)榧t色
 liminputcolor(choose);//頁面按鈕變色
}
//通過當前頁面按鈕和頁面數(shù)據(jù)長度將數(shù)據(jù)放進table內，封裝封裝?。?！必須封裝
function tablestr(num){//num是指當前哪個頁面
 var num1 = (num-1)*len;//確定循環(huán)開始的集合下標
 var num2 = num*len;//確定循環(huán)結束的結束下標
 document.getElementById("table").innerHTML='';//清空一下
 for(var i=num1;i<num2;i++){//遍歷數(shù)組
 var str = '';
 for(var h in strs[i]){//遍歷集合
  str+='<td>'+strs[i][h]+'</td>';
 }
 document.getElementById("table").innerHTML+='<tr>'+str+'</tr>';//每循環(huán)一次添加一條數(shù)據(jù)
 }
}
function liminputcolor(choose){
 document.getElementById("inputs").childNodes[choose-1].style.backgroundColor="red";
}
//初始化，當前頁面顯示為第一頁
limits();//頁面按鈕生成
document.getElementById("inputs").childNodes[0].style.backgroundColor="red";//第一個按鈕的背景顏色為紅色
tablestr(1);//table數(shù)據(jù)顯示
/*
到這里就結束了，但是?。。∵@些都是被封裝好了的，意思就是說，在最開始的時候這就是通用的做法；
最開始的數(shù)據(jù)就是在模擬后端的集合，也就是說，不論你后端傳遞給前端什么集合都可以實現(xiàn)分頁功能
*/

后言：本次博文就到這里了，多的話也沒說啥，解釋都在js的注釋里面，要是有什么疑問的，可以私我，好了，該說再見了，制作不易，各位看客點個贊再走唄

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
分頁

JavaScript中rxjs與?Observable?兩大類操作符解析
這篇文章主要介紹了JavaScript中rxjs與?Observable?兩大類操作符解析,運算符是對?Observable?進行操作并返回?Observable?的函數(shù)，文章圍繞主題展開詳細內容，需要的小伙伴可以參考一下
2022-07-07
javascript實現(xiàn)鼠標點擊生成文字特效
這篇文章主要為大家詳細介紹了javascript實現(xiàn)鼠標點擊生成文字特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-12-12
微信小程序自定義膠囊樣式
這篇文章主要為大家詳細介紹了微信小程序自定義膠囊樣式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
滾動條代碼生成器
滾動條代碼生成器...
2007-02-02
用JavaScript判斷CSS瀏覽器類型前綴的兩種方法
不管瀏覽器更新的多快，號稱多么支持標準。廠商不同，他們之間還是有很多差異。我們需要區(qū)分出這些差異，針對不同的瀏覽器做不同的處理。
2015-10-10
js實現(xiàn)的后臺左側管理菜單代碼
這篇文章主要介紹了js實現(xiàn)的后臺左側管理菜單代碼,可實現(xiàn)美觀大氣的左側折疊菜單效果,涉及JavaScript基于鼠標事件動態(tài)操作頁面元素樣式變換的技巧,非常具有實用價值,需要的朋友可以參考下
2015-09-09
小程序自動化測試的示例代碼
這篇文章主要介紹了小程序自動化測試，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-08-08
JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索
這篇文章主要為大家介紹了JS生態(tài)系統(tǒng)加速模塊解析賦能性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2024-01-01
微信小程序自定義鍵盤內部虛擬支付
這篇文章主要為大家詳細介紹了微信小程序自定義鍵盤，內部虛擬支付，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-12-12
易被忽視的js事件問題總結
這篇文章主要為大家詳細介紹了易被忽視的js事件問題，包括跨平臺事件、冒泡中target和currentTarget的區(qū)別，感興趣的朋友可以參考一下
2016-05-05