JS代码实现table数据分页效果

前端之家收集整理的这篇文章主要介绍了JS代码实现table数据分页效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第一个:实现的很常见很简单的显示页数翻页

     效果图:

•这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神)

Meta charset="UTF-"> 姓名

•下面就是JS代码

获取表格对象 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有种莫名的喜爱,有木有)

table<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>
Box" width="" border="" cellpadding="" cellspacing="">
上一页下一页页/共

以上内容是小编给大家介绍的JS代码实现table数据分页效果,希望对大家有所帮助,如果大家还有任何问题欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对编程之家网站的支持

原文链接:https://www.f2er.com/js/48418.html

猜你在找的JavaScript相关文章

性别 编号 年龄