分享layui的table的一些小技巧，前端分頁

最近一直在折騰報表，期間使用了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;
            }
        });
    }
}