javascript實(shí)現(xiàn)前端分頁功能
前言：今天給大家?guī)淼氖乔岸藬?shù)據(jù)的分頁功能，供大家參考，具體內(nèi)容如下
先上一波效果圖展示：
直接上代碼：這里使用的是JavaScript來實(shí)現(xiàn)
關(guān)于代碼詳解都以注釋的方式寫在JavaScript里的
HTML：
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>分頁</title> <link rel='stylesheet' href='http://www.gepszalag.com/bcjs/css/limitFace.css' rel='external nofollow' > </head> <body> <div class='all'> <table id='table'> </table> <div id='inputs'> </div> </div> <script src='http://www.gepszalag.com/bcjs/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ù)為模擬集合，個(gè)人理解js中的集合就是將對象放進(jìn)數(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' }];//假設(shè)規(guī)定每頁顯示長度為3var len = 3;//確認(rèn)該集合會被分成幾頁，分成幾頁就代表需要幾個(gè)頁面按鈕,封裝封裝方便多次運(yùn)用function limits(){ var countLim = Math.ceil(strs.length/len);//余數(shù)也算是一頁，這里用向上取整 //確認(rèn)頁面按鈕個(gè)數(shù)，進(jìn)行循環(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)'/>’;//每個(gè)頁面按鈕都綁定上一個(gè)點(diǎn)擊事件 }}var choose = 0;//創(chuàng)建一個(gè)全局變量用來保存當(dāng)前處于第幾個(gè)頁面//點(diǎn)擊按鈕獲取當(dāng)前按鈕的值進(jìn)行選擇當(dāng)前table是第幾頁數(shù)據(jù)function limitinput(ids){ choose = ids.value; tablestr(choose);//刷新table數(shù)據(jù) limits();//刷新頁面按鈕 ids.style.backgroundColor=’red’;//當(dāng)前點(diǎn)擊的頁面按鈕背景顏色改變?yōu)榧t色 liminputcolor(choose);//頁面按鈕變色}//通過當(dāng)前頁面按鈕和頁面數(shù)據(jù)長度將數(shù)據(jù)放進(jìn)table內(nèi)，封裝封裝！！！必須封裝function tablestr(num){//num是指當(dāng)前哪個(gè)頁面 var num1 = (num-1)*len;//確定循環(huán)開始的集合下標(biāo) var num2 = num*len;//確定循環(huán)結(jié)束的結(jié)束下標(biāo) 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';}//初始化，當(dāng)前頁面顯示為第一頁limits();//頁面按鈕生成document.getElementById('inputs').childNodes[0].style.backgroundColor='red';//第一個(gè)按鈕的背景顏色為紅色tablestr(1);//table數(shù)據(jù)顯示/*到這里就結(jié)束了，但是！！！這些都是被封裝好了的，意思就是說，在最開始的時(shí)候這就是通用的做法；最開始的數(shù)據(jù)就是在模擬后端的集合，也就是說，不論你后端傳遞給前端什么集合都可以實(shí)現(xiàn)分頁功能*/
后言：本次博文就到這里了，多的話也沒說啥，解釋都在js的注釋里面，要是有什么疑問的，可以私我，好了，該說再見了，制作不易，各位看客點(diǎn)個(gè)贊再走唄
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))2. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案3. phpstudy apache開啟ssi使用詳解4. 解析原生JS getComputedStyle5. IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案6. XML解析錯(cuò)誤：未組織好 的解決辦法7. XML入門的常見問題(二)8. 阿里前端開發(fā)中的規(guī)范要求9. ASP基礎(chǔ)入門第八篇（ASP內(nèi)建對象Application和Session）10. ASP中格式化時(shí)間短日期補(bǔ)0變兩位長日期的方法
網(wǎng)公網(wǎng)安備