重置我的多选择过滤器的jQuery数据表

Question

For my application, I used this example: JQuery Datatable column filtering using multi-select options . Huge thanks to the author and the one who answered btw!

Now, I tweaked it using my own data and included my own data. It's working fine but I wanted to add an additional feature. Resetting the filters with a button. Also, at initialization, I want the select buttons to show blank or make it's value "".

I know there's a way with this but I cannot come up with how.

Here's my jsFiddle

I've got a large amount of data so here's the js code:

 $(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

I see that you are populating the drop downs from the content of the datatable using append. Therefore, I would suggest that you create the select with a single entry like this:

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

Create a resent function and simply set the values to the blank entry you create, like this:

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

This should also fire the change event on the drop downs.