第一个:实现的很常见很简单的显示页数翻页
效果图:
•这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神)
rush:js;">
Meta charset="UTF-">
性别 | 编号 | 年龄 |
---|---|---|
•下面就是JS代码了
rush:js;">
$(function(){
var $table=$('table');//获取表格对象
var currentPage=;//设置当前页默认值为
var pageSize=;//设置每一页要显示的数目
$table.bind('paging',function () {
$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+)*pageSize).show();
//先将tbody中所有的行隐藏,再通过slice结合当前页数和页面显示的数目展现数据
});
var sumRows=$table.find('tbody tr').length;//获取数据总行数
var sumPages=Math.ceil(sumRows/pageSize);//得到总页数
var $pager=$('
');
for(var pageIndex=;pageIndex'+(pageIndex+)+'').bind("click",{"newPage":pageIndex},function(event){
currentPage=event.data["newPage"];
$table.trigger("paging");
//为每一个要显示的页数上添加触发分页函数
}).appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table);
$table.trigger("paging");
});
第二个:实现前进页和后退页
效果图:
•这是全部代码,用得原生JS,依然还是很简单滴(好像对原生js有种莫名的喜爱,有木有)
rush:js;">
table分页
Box" width="" border="" cellpadding="" cellspacing="">
irst">第一页
上一页
下一页
第页/共
页
以上内容是小编给大家介绍的JS代码实现table数据分页效果,希望对大家有所帮助,如果大家还有任何问题欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对编程之家网站的支持!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。