angularjs表格分页功能详解

接上一次，这次主要介绍表格分页功能，由于项目需要这个案例是关于前端分页的方式，现在很少会这么用了，但如有需要可以参考其中的思路
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（）；

以上就是表格的前端分页方法和页数，页标等跳转方式的方法，请结合第一章中的数据测试。