溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用原生javascript怎么實現一個前端分頁功能？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
HTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分頁</title> <link rel="stylesheet" href="css/limitFace.css" rel="external nofollow" > </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:
//一下數據為模擬集合，個人理解js中的集合就是將對象放進數組
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"
}
];
//假設規定每頁顯示長度為3
var len = 3;
//確認該集合會被分成幾頁，分成幾頁就代表需要幾個頁面按鈕,封裝封裝方便多次運用
function limits(){
var countLim = Math.ceil(strs.length/len);//余數也算是一頁，這里用向上取整
//確認頁面按鈕個數，進行循環顯示到頁面上
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;//創建一個全局變量用來保存當前處于第幾個頁面
//點擊按鈕獲取當前按鈕的值進行選擇當前table是第幾頁數據
function limitinput(ids){
choose = ids.value;
tablestr(choose);//刷新table數據
limits();//刷新頁面按鈕
ids.style.backgroundColor='red';//當前點擊的頁面按鈕背景顏色改變為紅色
liminputcolor(choose);//頁面按鈕變色
}
//通過當前頁面按鈕和頁面數據長度將數據放進table內，封裝封裝！！！必須封裝
function tablestr(num){//num是指當前哪個頁面
var num1 = (num-1)*len;//確定循環開始的集合下標
var num2 = num*len;//確定循環結束的結束下標
document.getElementById("table").innerHTML='';//清空一下
for(var i=num1;i<num2;i++){//遍歷數組
var str = '';
for(var h in strs[i]){//遍歷集合
str+='<td>'+strs[i][h]+'</td>';
}
document.getElementById("table").innerHTML+='<tr>'+str+'</tr>';//每循環一次添加一條數據
}
}
function liminputcolor(choose){
document.getElementById("inputs").childNodes[choose-1].style.backgroundColor="red";
}
//初始化，當前頁面顯示為第一頁
limits();//頁面按鈕生成
document.getElementById("inputs").childNodes[0].style.backgroundColor="red";//第一個按鈕的背景顏色為紅色
tablestr(1);//table數據顯示
/*
到這里就結束了，但是！！！這些都是被封裝好了的，意思就是說，在最開始的時候這就是通用的做法；
最開始的數據就是在模擬后端的集合，也就是說，不論你后端傳遞給前端什么集合都可以實現分頁功能
*/看完上述內容，你們掌握利用原生javascript怎么實現一個前端分頁功能的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
