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