dataTable.NET的search box每輸入一個字母進行一次檢索的問題

當使用dataTable.NET時,可以通到簡單的setting來添加一個search box進行全表格的檢索。

$('#test-listing')
    .on('order.dt', function () {
        var table = $('#test-listing').dataTable();
        var currentSort = table.fnSettings().aaSorting;
        // do something here
    })
    .on('search.dt', function () {
        var value = $('.dataTables_filter input').val();
        // do something here
    })
    .on( 'init.dt', function () {
        // fired when DataTables has been completely loaded.
        firstTimePageLoad = false;
    } )
    .DataTable({
        paging: false,
        ordering: true,
        fixedHeader: true,
        "search": {
            "search": searchText
        },
        order: defaultSort,
    });

當在search box輸入時,每輸入一次按鍵都會觸發 "seatch.dt"的function, 屏蔽的方法是將在search box上的keyup event進行unbind, 再bind自己要的function.,

$('.dataTables_filter input').unbind();
$('.dataTables_filter input').bind('keyup', function(e){
    if(e.keyCode == 13) {
        var table = $('#test-listing').dataTable()
        table.fnFilter(this.value);
        return false;
    }
});

上面的function會在按下enter鍵時,才進行fiter的動作。

需要注意的是,在實際使用時,當按下enter鍵除了可以fiter外,還會觸發form中其他button的click動作,原因可能與browser有關,

參考下面的link,

 https://github.com/facebook/react/issues/3907

一個work around的解決方法,在其他button的click function中添加下面的code.

if (event.detail == 0)
    return false;

 

posted @ 2019-07-24 04:37  日光之下无新事  阅读(199)  评论(0编辑  收藏  举报