前后端分离 之 通用异步分页脚本

参考博客：服务器端返回统一格式的数据

服务器端返回数据

假设服务器端返回数据格式如下：

{
    "code": 1,
    "msg": "操作成功！",
    "data": {  
        "records": [
            {
                "id": 1,
                "nickname": "张三",
                "account": "zhangsan",
                "password": "1234",
                "email": "zhangsan@qq.com"
            },
            {
                "id": 2,
                "nickname": "李四",
                "account": "lisi",
                "password": "1234",
                "email": "lisi@qq.com"
            },
            {
                "id": 3,
                "nickname": "王二",
                "account": "wanger",
                "password": "1234",
                "email": "wanger@qq.com"
            }
        ],
        "total": 8,
        "size": 3,
        "current": 1,
        "orders": [],
        "searchCount": true,
        "pages": 3
    }
}

注：data中的数据来自MyBatisPlus中的Ipage对象

分页脚本

function fun(url,pageNum,pageSize){
    $.ajax({
        url: url,
        type: "POST",
        data: {
            pageNum: pageNum,
            pageSize: pageSize
        },
        dataType: "json",
        success: function (res) {
            if(res.code == 1){ //成功
                let  $tbody = $("#tbody");
                $tbody.empty();//清空元素
                for(var i = 0;i上一页');
                let $prePage0 = $('
上一页
');

                if (res.data.current > 1){
                    $pagination.append($prePage1);
                }else {
                    $pagination.append($prePage0);
                }


                for (var i =1;i'+i+'');
                    if (i == res.data.current){
                        $page.css("color","blue");
                    }
                    $pagination.append($page);
                }

                let $nextPage1 = $('
下一页
');
                let $nextPage0 = $('
下一页
');
                if (res.data.current 

    
    
    
    
    
    
        li, .disabled, .active {
            display: inline;
            margin-right: 10px;
            list-style: none;
        }

        .disabled a {
            color: yellow;
            pointer-events: none;
        }

        .active a {
            color: blue;
        }
    





    
    
        #
        
        账号
        名称
        邮箱地址
        操作
    
    
    
    
        1
        
        hc
        贺彩
        hcitlife@hotmail.com
        
            
            
            
        
    
    
    
    
        
            
                上一页
                1
                2
                3
                4
                5
                下一页
            
        
    
    







    fun(baseurl + "user/index", 1, 3);

结果：

• 首页
• 中间页
• 尾页