layui table数据表格前端分页-蒲公英云

layui table数据表格前端分页

た入场券 2023-06-11 06:24 94阅读 0赞

下面js代码是在前端进行分页，主要是利用表格插件的parseData参数，该参数触发是在请求数据回来后，但还未显示在表中时触发的。

layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: '#gridTable' ,
                url: contextPath + '/pages/json/手工合同.json',
                method: 'get',
                request: {
                    limitName: 'rows', //每页数据量的参数名，默认：limit
                    pageName: 'page',
                },
                where: {
                },
                cols: [columns],
                response: {
                    statusName: 'result', //数据状态的字段名称，默认：code
                    statusCode: 200, //成功的状态码，默认：0
                    dataName: 'rows', //数据列表的字段名称，默认：data
                    countName: 'total',//规定数据总数的字段名称，默认：count
                },
                page: true,
                parseData: function(res){
                    var dataList = res.rows;
                    /* 如果需要前端做模拟查询，可以在此处写，先过滤数据
                    var temp = dataList;
                    dataList = [];
                    for(var i=0; i<temp.length; i++){
                        if(条件1){
                            flag1 = true;
                        }
                        if(条件2){
                            flag2 = true;
                        }
                        if(flag1 && flag2){
                            dataList.push(temp[i]);
                        }
                    } */
                    var total = dataList.length; //请求的数据总数
                    var list = []; //用来保存当前页显示的数据
                    //前端模拟分页，获取当前页、分页显示数据量
                    var page = $("#layui-table-page1").find(".layui-laypage-em").next().html();
                    var limit = $("#layui-table-page1").find(".layui-laypage-limits select").val();
                    console.log(page + ", " + limit);
                    if(page == undefined || page == null || page == ""){
                        page = 1;
                    }
                    if(limit == undefined || limit == null || limit == ""){
                        limit = 10;
                    }
                    //数据从哪条数据开始
                    var start = (page-1) * limit;
                    //数据从哪条数据结束
                    var end = page * limit;
                    if(end > total){
                        end = total;
                    }
                    //取分页数据
                    for(var i=start; i<end; i++){
                        list.push(dataList[i]);
                    }
                    return {
                        "result": 200, //解析接口状态
                        "total": total, //解析数据长度
                        "rows": list //解析数据列表
                    }
                },
            });
        });