搜索输入框以在数据表上进行渐进式搜索
下面是一个实现搜索输入框的示例,该框帮助用户搜索数据表中特定值的出现。
在下面的示例中,#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);
}