为 JQuery 数据表重置我的多选过滤器

Question

对于我的应用程序，我使用了以下示例：JQuery Datatable column filtering using multi-select options。非常感谢作者和回答btw的人！

现在，我使用自己的数据对其进行了调整，并包含了自己的数据。它工作正常，但我想添加一个附加功能。使用按钮重置过滤器。此外，在初始化时，我希望选择按钮显示为空白或使其值为“”。

我知道有办法解决这个问题，但我想不出怎么做。

这是我的jsFiddle

我有大量数据所以这里是js代码：

 $(document).ready(function() {
 var table = $('#example').DataTable({
      dom: 'lrtip',
      "columnDefs": [
            {
                "targets": [ 1 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true
            }
        ],
        "scrollY":        '40vh',
        "scrollCollapse": true,

        initComplete: function() {
          this.api().columns([1]).every(function() {
            var column = this;
            //console.log(column);  --> not needed
            var select = $("#TSFltr");
            column.data().unique().sort().each(function(d, j) {
              select.append('<option value="' + d + '">' + d + '</option>')
            });
          });
          this.api().columns([4]).every(function() {
            var column = this;
            //console.log(column);  --> not needed
            var select = $("#bodyFltr");
            column.data().unique().sort().each(function(d, j) {
              select.append('<option value="' + d + '">' + d + '</option>')
            });
          });
          this.api().columns([7]).every(function() {
            var column = this;
            //console.log(column);  --> not needed
            var select = $("#CTFltr");
            column.data().unique().sort().each(function(d, j) {
              select.append('<option value="' + d + '">' + d + '</option>')
            });
          });
          $("#TSFltr,#bodyFltr,#CTFltr").material_select();
        },
    });
          $('#TSFltr').on('change', function() {
            var search = [];

            $.each($('#TSFltr option:selected'), function() {
              search.push($(this).val());
            });

            search = search.join('|');
            table.column(1).search(search, true, false).draw();
          });

          $('#bodyFltr').on('change', function() {
            var search = [];

            $.each($('#bodyFltr option:selected'), function() {
              search.push($(this).val());
            });

            search = search.join('|');
            table.column(4).search(search, true, false).draw();
          });

          $('#CTFltr').on('change', function() {
            var search = [];

            $.each($('#CTFltr option:selected'), function() {
              search.push($(this).val());
            });

            search = search.join('|');
            table.column(7).search(search, true, false).draw();
          });  
  });

Answer 1

我看到您正在使用 append 从数据表的内容中填充下拉列表。因此，我建议您使用这样的单个条目创建选择：

<option value="">--Select size(s)--</option>

创建一个重新发送函数并将值设置为您创建的空白条目，如下所示：

$("#TSFltr").val("");

这也应该触发下拉菜单上的更改事件。