js呼叫ajax根據後臺返回的總數前端設定每頁的條數實現分頁功能
阿新 • • 發佈:2018-11-09
有時候前端需要實現分頁功能,但是後臺只給我們返回來總數,每頁顯示多少條資料需要我們前端來設定,貌似這個有點欺負人,哈哈哈。。話不多說直接上程式碼: (這裡需要用到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);