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

猜你喜欢

转载自blog.csdn.net/qq_37481512/article/details/83114417