有时候前端需要实现分页功能,但是后台只给我们返回来总数,每页显示多少条数据需要我们前端来设置,貌似这个有点欺负人,哈哈哈。。话不多说直接上代码: (这里需要用到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);