搜索输入框以在数据表上进行渐进式搜索

下面是一个实现搜索输入框的示例,该框帮助用户搜索数据表中特定值的出现。

在下面的示例中,#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);
}