搜尋輸入框以在資料表上進行漸進式搜尋

下面是一個實現搜尋輸入框的示例,該框幫助使用者搜尋資料表中特定值的出現。

在下面的示例中,#report 是 div 的 div id,其中包含搜尋輸入框。使用者在此輸入框中輸入值後立即呼叫此函式。由於單個字元可能會出現很多,因此只有在搜尋框中輸入的字元超過 1 個時,才會呼叫實際搜尋功能。

$('#report').on('input',function(e){
     if($(this).data("lastval")!= $(this).val()){
     $(this).data("lastval",$(this).val());
        //change action
        if($('#report').val().length >1 ){ 
            searchTable($(this).val()); 
        }
     };
 });

在 searchTable 函式中,我們使用內建的資料表函式 fnFilter 來查詢輸入字串的匹配出現。**我們可以通過傳遞列索引將搜尋限制為特定列。**這裡我們傳遞列索引 2。

function searchTable(inputVal) {
    var dataTable = $("#report_table").dataTable();
    dataTable.fnFilter(inputVal,2);
}

如果你需要搜尋所有列**,請確保未傳遞索引引數** r。

function searchTable(inputVal) {
    var dataTable = $("#report_table").dataTable();
    dataTable.fnFilter(inputVal);
}