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