前端做的非异步分页操作
利用前端来做一个非异步的数据分页,但当数据过多时会卡,下面来看代码:
<script type="text/javascript">
function qukong(a){
if(a==""||null){
return "无";
}
else{
return a;
}
};
$.ajax({
type:"get",
url:"www.ll",
dataType:"json",
success:function(msg){
var data_msg = msg.showapi_res_body.result;
//编造表数据
//表头
var head=
'<thead><tr>'+
'<td> 彩票种类 </td>'+
'<td> 地区 </td>'+
'<td> 分类 </td>'+
'<td> 描述 </td>'+
'<td> 名称</td>'+
'</tr></thead><tbody>';
var end ='</tbody>'
//表内容,后台返回的内容可以封装到这里,随时取用,但是如果数据量很大估计会相当耗资源。
var pageData=[];
for(var key in data_msg){
var data='<tr>'+
'<td>'+qukong(data_msg[key].series)+'</td>'+
'<td>'+qukong(data_msg[key].area)+'</td>'+
'<td>'+qukong(data_msg[key].issuer)+'</td>'+
'<td>'+qukong(data_msg[key].notes)+'</td>'+
'<td>'+qukong(data_msg[key].descr)+'</td>'+
'</tr>';
pageData.push(data);
}
$(function(){
var Count = pageData.length;//记录条数
alert(Count);
var PageSize=10;//设置每页示数目
var PageCount=Math.ceil(Count/PageSize);//计算总页数
var currentPage =1;//当前页,默认为1。
//造个简单的分页按钮
$('.total').html(PageCount);
$('.show_current').html(currentPage);
//显示默认页(第一页)
$('#table').empty().append(head);
for(i=(currentPage-1)*PageSize;i<10;i++){
$('#table').append(pageData[i]);
}
$('#table').append(end);
//显示选择页的内容
$('.next').click(function(){
if(currentPage < PageCount){
currentPage ++;
$('.show_current').html(currentPage);
$('#table').html('');
$('#table').append(head);
for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){
$('#table').append(pageData[i]);
}
$('#table').append(end);
}
});
$('.prev').click(function(){
console.log(currentPage)
if(currentPage > 1){
currentPage--;
$('.show_current').html(currentPage);
$('#table').html('');
$('#table').append(head);
for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){
$('#table').append(pageData[i]);
}
$('#table').append(end);
}
});
});
},
error:function(){
alert("网络错误")
}
})
</script>