如何做分页angularjs 分页

来源：蜘蛛抓取(WebSpider) 时间：2015-02-15 06:15 标签： angularjs table 分页
如何做分页AngularJS_百度知道如何做分页AngularJS_百度知道angularjs表格分页功能详解
投稿：hebedich
字体：[ ] 类型：转载 时间：
本文给大家分享的是个人在项目中使用angularjs实现表格分页功能的思路和代码，非常的简单实用，有需要的小伙伴可以参考下。
接上一次，这次主要介绍表格分页功能，由于项目需要这个案例是关于前端分页的方式，现在很少会这么用了，但如有需要可以参考其中的思路
1.通过UL来展示页标，其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。
&div class="pagination"&
&ul style="float:right"&
&li id="previous"&&a href=""&上一页&/a&&/li&
&li&&!--用于页标的显示 --&
&ul id="page_num_all"&
&li id="next"&&a href="" style="border:1px solid #float:right"&下一页&/a&&/li&
当前为第&span class="num" id="current_page"&&/span&页，总共&span class="num" id="page_all"&&/span&页
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_//开始截取的页标
var end=start+show_//截取个数
$('#page').children().css('display', 'none').slice(start, end).css('display', '');
current_page=
$("#current_page").html("&"+current_page+"&");
table_page()；
以上就是表格的前端分页方法和页数，页标等跳转方式的方法，请结合第一章中的数据测试。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp会员注册
本站不参与评论！（）
自觉遵守：爱国、守法、自律、真实、文明的原则
尊重网上道德，遵守中华人民共和国各项有关法律法规
严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的评论
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
您在本站发表的评论，本站有权保留、转载、引用或者删除
参与本评论即表明您已经阅读并接受上述条款

我要回帖

更多关于 angularjs table 分页 的文章

 

随机推荐