<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script>
$(function(){
var $table=$("table"),
currentPage=0;
var pageSize=2;
$table.bind('paging',function(){
//隐藏所有的行,取出当前页的行显示
$table.find('tbody tr').hide().slice(currentPage*pageSize,(currentPage+1)*pageSize).show();
});
var sumRows=$table.find('tbody tr').length; //记录总行数
var sumPages=Math.ceil(sumRows/pageSize);
var $pager=$("<div class='page'></div>"); //分页div
for(var pageindex=0;pageindex<sumPages;pageindex++){
//为页标签加上链接
$('<a href="#"><span>'+(pageindex+1)+'</span></a>').bind('click',{"newpage":pageindex},function(event){
currentPage=event.data["newpage"];
$table.trigger('paging');
}).appendTo($pager);
$pager.append(' ');
}
$pager.insertAfter($table);
$table.trigger('paging');
})
</script>
<title></title>
</head>
<body>
<table>
<thead>
<th>编号</th><th>语言</th><th>课时</th>
</thead>
<tbody>
<tr>
<td>c001</td><td>C#</td><td>80</td>
</tr>
<tr>
<td>002</td><td>java</td><td>90</td>
</tr>
<tr>
<td>003</td><td>php</td><td>60</td>
</tr>
<tr>
<td>004</td><td>javascript</td><td>80</td>
</tr>
<tr>
<td>003</td><td>php2</td><td>60</td>
</tr>
<tr>
<td>004</td><td>javascript</td><td>80</td>
</tr>
<tr>
<td>003</td><td>php3</td><td>60</td>
</tr>
<tr>
<td>004</td><td>javascript</td><td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery的表格分页
最新推荐文章于 2024-02-04 10:11:32 发布