频道导航

angularjs表格分页功能详解

2019-01-04 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs表格分页功能详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

html：

1.通过UL来展示页标，其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。

IoUs">

当前为第页，总共页

@H_301_13@

js：

1.首先需要设置每页想要显示的条数，通过选取页面元素来确定本次生成的总条数，以及当前所在的页数（为跳转做准备）

2.如果总页数大于生成的当前页数，则继续生成下一页直到完毕后，将角标添加到页面中

3.将所有的表格数据隐藏，只显示一开始设置的第一页中的5条

4.@R_126_404@面功能，tab_page（）通过传入的index（页数）*显示的条数来确定截取tr的开始位置和结束位置，然后将所有的tr隐藏，只显示该范围内的tr（display：“”）；

5.上一页下一页和跳转功能，获取当前页的数字，注意判断是否为第一或最后一页，将其作为index传入跳转功能中即可

current_num){//循环生成页标元素 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()；

@H_301_13@

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

angularjs 表格分页