1. 程式人生 > >js呼叫ajax根據後臺返回的總數前端設定每頁的條數實現分頁功能

js呼叫ajax根據後臺返回的總數前端設定每頁的條數實現分頁功能

有時候前端需要實現分頁功能,但是後臺只給我們返回來總數,每頁顯示多少條資料需要我們前端來設定,貌似這個有點欺負人,哈哈哈。。話不多說直接上程式碼: (這裡需要用到layui外掛,js檔案自己去官網下載哦)



var pageNumber=1;//第幾頁
var sumCount=0; //總共多少條數
var pageSize=3; //每頁顯示3條
//連線終端
function connTermial(hostId,pageNumber,pageSize){
    $.ajax({
        url:url+'xxxx',
        type:'post',
        data:{
            xxxxid:xxxx,
            xxxx:xxx,
        },
        success:function (res) {
            var con=res.data;
            sumCount=con.length;  //總共多少條資料
            if(con.length>0){
                var arr_length = con.length;
                var newArr = [];  //每頁顯示pageSize條,分割成小陣列
                for(var i=0;i<arr_length;i+=pageSize){
                    newArr.push(con.slice(i,i+pageSize));
                }
                var str='';
                for(var t=0;t<newArr[pageNumber-1].length;t++){
                    str +='<tr>' +
                        '<td>'+(pageSize*(pageNumber-1)+(t+1))+'</td>' +
                        '<td>'+newArr[pageNumber-1][t].xx+'</td>' +
                        '<td>'+newArr[pageNumber-1][t].xx+'</td>' +
                        '<td>'+newArr[pageNumber-1][t].xx+'</td>' +
                        '</tr>';
                }
                $('#xxx').html(str)
            }else{
                $('#xxx').html('')
            }
        },error:function (err) {
            console.log(err)
        }
    })
}
connTermial(hostId,pageNumber,pageSize);
//分頁
setTimeout(function () {
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        //執行一個laypage例項
        laypage.render({
            elem: 'conPage' //注意,這裡的 conPage 是 ID,不用加 # 號
            ,theme: '#4189f4'
            ,limit:pageSize  //每頁顯示pageSize條
            ,count:sumCount //資料總數,從服務端得到
            ,jump:function (obj,frist) {
                if(!frist){
                    connTermial(hostId,obj.curr,pageSize)
                }
            }
        });
    });
},500);