在数据表的下拉过滤器中添加"Show All"选项

Question

我使用数据表实现了下拉过滤器。

网页文件

<select id='filter'>
    <option value>Show All</option>
    <option value='1'>one</option>
    ...
    <option value='10'>ten</option>
</select>
<table id='table'>
    ...
</table>

爪哇语

var table = $("#table").DataTable();
$("#filter").change(function(){
    var filterValue = $(this).selectedOptions[0].label;
    if ( filterValue == '' ){
        // **Show All Functionality**
    } else {
        table.column(2).search(filterValue).draw();
    }
});

如果我选择一到十，它工作正常，但我想在应用过滤器后再次显示所有内容。
有什么功能可以这样做吗？

谢谢。

Answer 1

您需要在搜索空字符串（应返回所有行）后再次绘制表格： table.search('').draw();

如果这有效，您可以摆脱if子句并只做：

$("#filter").change(function() {
    table.search($(this).val()).draw();
});

Answer 2

您只需要在代码中进行一些小的更改，如下所示：

<option value='0'>Show All</option>  // Set value as 0 for "Show All" option   
 var table = $("#table").DataTable();
 $("#filter").change(function(){
       var filterValue = $(this).val();
       if ( filterValue == '0' ){  // Check for show all option
            table.search(filterValue).draw(); 
       } else {
            table.search(filterValue).draw();
       }
    });