昨天朋友問我熏瞄，后臺傳過來的數(shù)據(jù)在前端分頁顯示怎么做终惑。
我也只做過后臺分頁查詢前端顯示的方法，沒有做過后臺不分頁而在前端分頁的形式感帅。
于是研究了下后臺返回全部數(shù)據(jù)斗锭，在前端將數(shù)據(jù)分頁顯示的辦法。自己研究再參考網(wǎng)上的辦法失球，
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分頁</title>
<script type="text/javascript" src="jquery-1.11.1.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>
</head>
<body>
<div style="width:450px;margin:0 auto;">
<div id="dataShow" style="width:450px;margin:0 auto;">
<table class="table" id="table"></table>
</div>
<br/>
<div id="page" style="width:450px;margin:0 auto;"></div>
</div>
<script type="text/javascript">
//編造表數(shù)據(jù)
//表頭
var head=
'<thead><tr>'+
'<td> 姓 名 </td>'+
'<td> 年 齡 </td>'+
'<td> 彥 值* </td>'+
'<td> 成 績 </td>'+
'<td> 身 高cm </td>'+
'</tr></thead><tbody>';
//表內(nèi)容拒迅，后臺返回的內(nèi)容可以封裝到這里，隨時取用她倘，但是如果數(shù)據(jù)量很大估計會相當(dāng)耗資源。
var pageData=[];
for(var i=1;i<100;i++){
var data='<tr>'+
'<td>學(xué)生'+i+'</td>'+
'<td>'+Math.round(Math.random()*20)+'</td>'+
'<td>'+Math.round(Math.random()*5)+'顆星</td>'+
'<td>'+Math.round(Math.random()*100)+'</td>'+
'<td>'+Math.round(Math.random()*200)+'cm</td>'+
'</tr>';
pageData.push(data);
}
//表結(jié)尾
var end='</tbody>';
$(function(){
var Count = pageData.length;//記錄條數(shù)
var PageSize=10;//設(shè)置每頁示數(shù)目
var PageCount=Math.ceil(Count/PageSize);//計算總頁數(shù)
var currentPage =1;//當(dāng)前頁作箍，默認(rèn)為1硬梁。
//造個簡單的分頁按鈕
for(var i=1;i<=PageCount;i++){
var pageN='<a href="#" selectPage="'+i+'" >第'+i+'頁</a>';
$('#page').append(pageN);
}
//顯示默認(rèn)頁（第一頁）
$('#table').empty().append(head);
for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){
$('#table').append(pageData[i]);
}
$('#table').append(end);
//顯示選擇頁的內(nèi)容
$('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>
</body>
</html>
