angularjs表格分页功能详解

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

html:

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

<div> <ul> <li><a href="">上一页</a></li> <li><!--用于页标的显示 --> <ul> </ul> </li> <li><a href="">下一页</a></li> </ul> <span> 当前为第<span></span>页,总共<span></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><a href="https://www.jb51.net/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("&nbsp;"+current_page+"&nbsp;");//显示当前页 $("#page_all").html("&nbsp;"+page_num+"&nbsp;");//显示总页数 $("#previous").click(function(){//上一页 var new_page=parseInt($("#current_page").text())-1; if(new_page>0){ $("#current_page").html("&nbsp;"+new_page+"&nbsp;"); tab_page(new_page); } }); $("#next").click(function(){//下一页 var new_page=parseInt($("#current_page").text())+1;//当前页标 if(new_page<=page_num){//判断是否为最后或第一页 $("#current_page").html("&nbsp;"+new_page+"&nbsp;"); 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("&nbsp;"+current_page+"&nbsp;"); } } table_page();

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

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwdzg.html