<title>分页</title>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<style type="text/css">
.table{border:solid #FFAEB9; border-width:1px 0px 0px 1px;width: 100%;font-size: 12px;line-height: 21px;text-align:center;}
.table thead td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;}
.table tbody td{border:solid #FFAEB9; border-width:0px 1px 1px 0px;padding-right: 5px;padding-left: 5px;}
</style>
<script type="text/javascript">
//编造表数据
//表头
var head=
''+
' 姓 名 '+
' 年 龄 '+
' 彦 值* '+
' 成 绩 '+
' 身 高cm '+
'';
//表内容，后台返回的内容可以封装到这里，随时取用，但是如果数据量很大估计会相当耗资源。
var pageData=[];
for(var i=1;i<100;i++){
var data=''+
'学生'+i+''+
''+Math.round(Math.random()*20)+''+
''+Math.round(Math.random()*5)+'颗星'+
''+Math.round(Math.random()*100)+''+
''+Math.round(Math.random()*200)+'cm'+
'';
pageData.push(data);
}
//表结尾
var end='';
$(function(){
var Count = pageData.length;//记录条数
var PageSize=10;//设置每页示数目
var PageCount=Math.ceil(Count/PageSize);//计算总页数
var currentPage =1;//当前页，默认为1。
//造个简单的分页按钮
for(var i=1;i<=PageCount;i++){
var pageN='第'+i+'页';
$('#page').append(pageN);
}
//显示默认页（第一页）
$('#table').empty().append(head);
for(i=(currentPage-1)PageSize;i<PageSizecurrentPage;i++){
$('#table').append(pageData[i]);
}
$('#table').append(end);
//显示选择页的内容
$('a').click(function(){
var selectPage=$(this).attr('selectPage');
$('#table').html('');
$('#table').append(head);
for(i=(selectPage-1)*PageSize;i<PageSize*selectPage;i++){
$('#table').append(pageData[i]);
}
$('#table').append(end);
});
});
</script>