接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路
html:
1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。
rush:xhtml;">
IoUs">
当前为第页,总共页
js:
1.首先需要设置每页想要显示的条数,通过选取页面元素来确定本次生成的总条数,以及当前所在的页数(为跳转做准备)
2.如果总页数大于生成的当前页数,则继续生成下一页直到完毕后,将角标添加到页面中
3.将所有的表格数据隐藏,只显示一开始设置的第一页中的5条
4.跳转页面功能,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();
以上就是表格的前端分页方法和页数,页标等跳转方式的方法,请结合第一章中的数据测试。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。