接上一次，這次主要介紹表格分頁功能，由於專案需要這個案例是關於前端分頁的方式，現在很少會這麼用了，但如有需要可以參考其中的思路
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()；
以上就是表格的前端分頁方法和頁數，頁標等跳轉方式的方法，請結合第一章的資料測驗。
