前端做的非异步分页操作

利用前端来做一个非异步的数据分页,但当数据过多时会卡,下面来看代码:

<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>

posted @ 2017-03-06 14:40  fireporsche  阅读(206)  评论(0编辑  收藏  举报