最近一直在折腾报表，期间使用了layui的table做展示（版本号：2.5.5）

起初：以为是查询结果出来后，前端和服务端分页一弄就完事了，参考例子，但是sql写得太长太长了，翻页困难，数据库是老旧的SqlServer2008 R2

接着：开始改造，由于查询出来的数据量不是很大，约在10w以内，于是开始【一次请求，前端自己分页】的思路，浏览器还是很强大的

$.ajax({
                type: "post",
                url: "请求地址", 
                async: true,
                data: {
                    //查询条件
                },
                success: function (res) {
                    sourceData = res.data;
                    pageData = res.data;
                    let new_data = $.extend(true, [], res.data);
                    tableIns=table.render({
                        elem: \'#dataTable\'
                        , id: \'dataTable\'
                        , height: height
                        , loading: true
                        , title: tbTitle
                        , autoSort: false //手动排序
                        , page: true
                        , limit: m_limit
                        , limits:[50,100,200,300]
                        , toolbar: \'#toolbar\'
                        , defaultToolbar: [\'filter\', \'print\']
                        , cols: [[
                        { field: \'序号\', title: \'序号\', width: 70, fixed: \'left\', type: \'numbers\' }
                        //需要显示的列
                            ]]
                        , data:new_data
                        , done: function () {
                            searchPage();
                        }
                    });
                }
            })

利用table的data属性进行数据的赋值，完成前端的分页。拉了生产大概八九万的数据测试展示，没有卡顿，（本机8G内存，i5 4核，普通用户机器4G）

之后：因为还想提供前端的本地搜索功能，完善了searchPage()函数，随意使用一个输入框

        function searchPage() {
            $("#Keyword").keydown(function (e) {
                var curKey = e.which;
                if (curKey == 13) {
                    var loading = layer.load(2, {
                        content:\'搜索中...\',
                        shade:  [0.3, \'#393D49\'],time: 3 * 1000
                    });
                    var Keyword = $(\'#Keyword\').val();
                     Keyword = trim(Keyword);
                    pageData = array_search(sourceData, Keyword);
                    let new_data = $.extend(true, [], pageData);    
                    table.reload(\'dataTable\', { data: new_data });
                    layer.close(loading);
                    $(\'#Keyword\').val(Keyword);
                }
            });
        }

 核心搜索函数array_search(),查找匹配的数据

/*
* js array_searcy() 函数
* @param array 必选参数 要查找的数组或对象
* @param find 必须参数 要查找的内容
*/
function array_search(array, str) {
    if (typeof array !== \'object\') {
        return false;
    } else {
        var found = [];
        for (var i = 0; i < array.length; i++) {
            for (var j in array[i]) {
                var value = array[i][j]+\'\';//转化为字符串
                if (value.indexOf(str) >= 0) {
                    found.push(array[i]);
                    break;
                }
            }
        }
        return found;
    }
}
//去左空格;
function ltrim(s) {
    return s.replace(/(^\s*)/g, "");
}
//去右空格;
function rtrim(s) {
    return s.replace(/(\s*$)/g, "");
}
//去左右空格;
function trim(s) {
    return s.replace(/(^\s*)|(\s*$)/g, "");
}

 小细节扩展：如果想excel导出可以使用前端导出，但是数据量大的时候，会卡死浏览器，无法异步（也考虑使用woker对象，但还是不好弄，一些信息和组件无法在woker里面使用）

后续：增加了一个前端排序，自带的排序autoSort需要关闭（原排序只针对当前页排序，适合后端前端联动排序）

        table.on(\'sort(dataTable)\', function (obj) {
            //console.log(obj.field); //当前排序的字段名
            //console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            let sortSourceData = $.extend(true, [], sourceData);
            let sortType = "";
            switch (obj.field) {
                case \'需要排序的字段\'://需注意在field绑定的时候开启sort
                    sortType = "number"; break;
            }
            tableSort(sortSourceData, obj.field, obj.type, sortType);
            //console.log(sortSourceData);
            //console.log(sourceData);
            table.reload(\'dataTable\', {
              initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
              ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                field: obj.field //排序字段
                ,order: obj.type //排序方式
              },data: sortSourceData
            });
        });

 核心函数tableSort()，利用array自带的sort进行扩展

//asc 升序
//desc 降序
/**
 * @tableObj 表
 * @field 字段
 * @orderBy 排序方式
 * @sortType 排序是类型
 */
function tableSort(tableObj, field, orderBy, sortType) {
    var type = \'number\';
    if (sortType == null && tableObj.length > 0) {
        type = typeof(tableObj[0][field]);
    } else {
        type = sortType;
    }
    if (orderBy == \'desc\') {
        return tableObj.sort(function (a, b) {
            var x = a[field];
            var y = b[field];
            switch (type) {
                case \'number\':
                    if (x == null) {
                        x = 0;
                    }
                    if (y == null) {
                        y = 0;
                    }
                    return x - y;
                case \'string\':
                    if (x == null || x == \'\') {
                        x = 0;
                    } else {
                        x = x.charCodeAt(0);
                    }
                    if (y == null || y == \'\') {
                        y = 0;
                    } else {
                        y = y.charCodeAt(0);
                    }
                    return x- y;
                case \'datetime\':
                    if (x == null) {
                        x = 0;
                    } else {
                        x = new Date(x).getTime();
                    }
                    if (y == null) {
                        y = 0;
                    } else {
                        y = new Date(y).getTime();
                    }
                    return x - y;
            }
        });
    } else if (orderBy == \'asc\') {
        return tableObj.sort(function (a, b) {
            var x = a[field];
            var y = b[field];
            switch (type) {
                case \'number\':
                    if (x == null) {
                        x = 0;
                    }
                    if (y == null) {
                        y = 0;
                    }
                    return y - x;
                case \'string\':
                    if (x == null || x == \'\') {
                        x = 0;
                    } else {
                        x = x.charCodeAt(0);
                    }
                    if (y == null || y == \'\') {
                        y = 0;
                    } else {
                        y = y.charCodeAt(0);
                    }
                    return y - x;
                case \'datetime\':
                    if (x == null) {
                        x = 0;
                    } else {
                        x = new Date(x).getTime();
                    }
                    if (y == null) {
                        y = 0;
                    } else {
                        y = new Date(y).getTime();
                    }
                    return y - x;
            }
        });
    }
}

 

版权声明：本文为RainbowInTheSky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/RainbowInTheSky/p/12696556.html