DataTables前端搜尋
老實說不好用,最好還是選擇用後端模式
前端搜尋
/** 前端搜尋時間 */
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
let index = MAIN_TABLE.column("reportTime:name").index();
let from = $("#sf-reportTime-min").val();
let to = $("#sf-reportTime-max").val()
if (from == "" && to == "") return true;
var min = dayjs(from).unix();
var max = dayjs(to).unix();
var date = dayjs(data[index]).unix();
if (!(Number.isNaN(min) && Number.isNaN(max)) && min <= date && max >= date) {
return true;
}
if (min <= date && Number.isNaN(max)) return true;
if (max >= date && Number.isNaN(min)) return true;
return false;
}
);
/** 前端搜尋 */
function frontEndSearch() {
let imei = $("#sf-imei").val();
if (imei) {
//console.log("imei="+imei)
MAIN_TABLE.column("imei:name").search(imei);
}
let projectName = $("#sf-hostId>option:selected").text();
if (projectName && $("#sf-hostId").val()) {
//console.log("projectName="+projectName)
MAIN_TABLE.column("projectCode:name").search(projectName);
}
let groupName = $("#sf-groupName").val();
if (groupName) {
//console.log("groupName="+groupName)
MAIN_TABLE.column("groupPath:name").search(groupName);
}
MAIN_TABLE.draw()
}
前端搜尋還原
/** 前端搜尋還原 */
function frontEndClear() {
$("[id^=sf-]").each(function() {
this.value = '';
this.checked = false;
});
MAIN_TABLE.search('').columns().search('').draw();
}
使前端排序null與空白 last
- 預設前端排序的邏輯是用js排序的邏輯,null會在最前,可以透過
pre-format
的方式改掉
/** 使前端排序null與空白 last */
$.extend( $.fn.dataTable.ext.type.order, {
'date-pre' : function ( d ) {
return Date.parse( d ) || Infinity;
},
'string-pre' : function ( d ) {
return (!d||d=="")?"ZZZ":d;
},
"num" : function ( d ) {
return (!d||isNaN(d))?Infinity:d;
},
});
操作rows data
- 前端操作表格內資料透過API,最重要的就是這個
toArray()
方法
let list = MAIN_TABLE.rows().data().toArray();
上次修改於 2022-11-15