html 表格 分页源码,JS代码实现table数据分页效果

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

效果图：

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

姓名性别编号年龄

张三男tom男李四男二蛋男二丫女

•下面就是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");