接上一次，這次主要介紹表格分頁功能，由于項目需要這個案例是關于前端分頁的方式，現在很少會這么用了，但如有需要可以參考其中的思路
html：
1.通過UL來展示頁標，其中每個頁標的li是通過異步加載從獲取到不同的表格數據來動態生成的。
<div class="pagination"> <ul style="float:right"> <li id="previous"><a href="">上一頁</a></li> <li><!--用于頁標的顯示 --> <ul id="page_num_all"> </ul> </li> <li id="next"><a href="" style="border:1px solid #ddd;float:right">下一頁</a></li> </ul> <span> 當前為第<span class="num" id="current_page"></span>頁，總共<span class="num" id="page_all"></span>頁 </span> </div>
js：
1.首先需要設置每頁想要顯示的條數，通過選取頁面元素來確定本次生成的總條數，以及當前所在的頁數（為跳轉做準備）
2.如果總頁數大于生成的當前頁數，則繼續生成下一頁直到完畢后，將角標添加到頁面中
3.將所有的表格數據隱藏，只顯示一開始設置的第一頁中的5條
4.跳轉頁面功能，tab_page（）通過傳入的index（頁數）*顯示的條數來確定截取tr的開始位置和結束位置，然后將所有的tr隱藏，只顯示該范圍內的tr（display：“”）；
5.上一頁下一頁和跳轉功能，獲取當前頁的數字，注意判斷是否為第一或最后一頁，將其作為index傳入跳轉功能中即可
function table_page(){ var show_page=5;//每頁顯示的條數 var page_all=$("#page").children().size();//總條數 var current_page=1;//當前頁// console.log(page_all); var page_num=Math.ceil(page_all/show_page);//總頁數 var current_num=0;//用于生成頁標的計數器 var li="";//頁標元素 while(page_num>current_num){//循環生成頁標元素 li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>'; current_num++; } $("#page_num_all").html(li);//添加頁標到頁面 $('#page tr').css('display', 'none');//設置隱藏 $('#page tr').slice(0, show_page).css('display', '');//設置顯示 $("#current_page").html(" "+current_page+" ");//顯示當前頁 $("#page_all").html(" "+page_num+" ");//顯示總頁數 $("#previous").click(function(){//上一頁 var new_page=parseInt($("#current_page").text())-1; if(new_page>0){ $("#current_page").html(" "+new_page+" "); tab_page(new_page); } }); $("#next").click(function(){//下一頁 var new_page=parseInt($("#current_page").text())+1;//當前頁標 if(new_page<=page_num){//判斷是否為最后或第一頁 $("#current_page").html(" "+new_page+" "); tab_page(new_page); } }); $(".page_num").click(function(){//頁標跳轉 var new_page=parseInt($(this).text()); tab_page(new_page); }); function tab_page(index){//切換對應頁標的頁面 var start=(index-1)*show_page;//開始截取的頁標 var end=start+show_page;//截取個數 $('#page').children().css('display', 'none').slice(start, end).css('display', ''); current_page=index; $("#current_page").html(" "+current_page+" "); } }table_page()；以上就是表格的前端分頁方法和頁數，頁標等跳轉方式的方法，請結合第一章中的數據測試。
新聞熱點
疑難解答
