js调用ajax根据后台返回的总数前端设置每页的条数实现分页功能

阳光穿透心脏的1/2处 2022-05-05 09:34 103阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，103人围观）

还没有评论，来说两句吧...

相关阅读

相关前端js简单的分页功能

* 首先看下效果 ![在这里插入图片描述][20190912163044785.png] * 只使用js编写一个简单分页, 话不多说直接上代码 * ...

桃扇骨/ 2024年04月18日 22:15/ 0 赞/ 38 阅读

相关 vue前端分页功能怎么实现

![bc2da4d0171e40d7bd6a4bcd9f700623.jpeg][] Vue前端分页功能可以通过以下几个步骤实现： 1. 安装分页组件库（如vue-pag

朴灿烈づ我的快乐病毒、/ 2023年10月10日 23:50/ 0 赞/ 43 阅读

相关前端---原生JS实现分页

<html> <head> <title>原生js分页插件</title> <style> /

叁歲伎倆/ 2022年11月29日 00:54/ 0 赞/ 165 阅读

相关 easyUI前端分页与后台分页总结

分页往往是依附于数据表格的，所以我们就使用的是easyui的datagrid组件，来开启pagination分页组件，为了方便，我们使用[js][]实现。

浅浅的花香味﹌/ 2022年06月10日 11:29/ 0 赞/ 291 阅读

相关分页计算总页数算法：总页数=（总数-1）/每页数量+1----总页数=（总数+每页数量-1）/每页数量

分页计算总页数算法：总页数=（总数-1）/每页数量+1 总页数=（总数+每页数量-1）/每页数量

拼搏现实的明天。/ 2022年06月07日 07:08/ 0 赞/ 202 阅读

相关 js调用ajax根据后台返回的总数前端设置每页的条数实现分页功能

有时候前端需要实现分页功能，但是后台只给我们返回来总数，每页显示多少条数据需要我们前端来设置，貌似这个有点欺负人，哈哈哈。。话不多说直接上代码： (这里需要用到layui插件，

阳光穿透心脏的1/2处/ 2022年05月05日 09:34/ 0 赞/ 104 阅读

相关 JS实现前端分页

一、HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'>

Bertha 。/ 2022年02月19日 17:17/ 0 赞/ 309 阅读

相关 ajax实现分页

之前写的分页都是a标签直接跳转，这次业务需要不刷新页面实现分页，下面记录原生的实现方法： html //第一页默认展示内容 <div id='user_l

小咪咪/ 2022年02月18日 15:29/ 0 赞/ 311 阅读

相关前端分页功能实现（PC）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加载</title> <sty

╰+攻爆jí腚メ/ 2022年01月09日 05:51/ 0 赞/ 265 阅读

相关前端分页功能实现（PC）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>加载</title> <sty

悠悠/ 2022年01月06日 12:21/ 0 赞/ 306 阅读