注意一些函数的用法,与元素的选取方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Jquery表格分页</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th> 编号 </th><th> 语言 </th><th> 课时 </th>
</tr>
</thead>
<tbody>
<tr>
<td>c001</td><td>C#</td><td>80</td>
</tr>
<tr>
<td>c002</td><td>Java</td><td>70</td>
</tr>
<tr>
<td>c003</td><td>PHP</td><td>60</td>
</tr>
<tr>
<td>c004</td><td>Perl</td><td>50</td>
</tr>
</tbody>
</table>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function(){
var $table=$('table');
var 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>')
for(var pageindex=0;pageindex<sumPages;pageindex++)
{
//f分页标签加上连接
$('<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); //分页div插入table末尾
$table.trigger("paging"); //触发分页事件
});
</script>
</body>
</html>