Question

对于我的应用程序，我使用了此示例：JQuery Datatable column filtering using multi-select options 。非常感谢作者和回答顺便说一句的人！

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

我知道有一种方法，但我无法想出办法。

这是我的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("");

这也应该在下拉列表中触发更改事件。

重置JQuery Datatable的多选过滤器

1 个答案: