jQuery 数据表中的下拉过滤

Question

Link to CodePen .

I'm using the Datatables jQuery plugin for this table.

I'm trying to figure out how to implement the Filter By Location dropdown at the top to work. So if you select Bracebridge from the dropdown for example, it only shows the products with Bracebridge. I've tried playing around with the column().search() function from Datatables, having a hard time getting it to work.

HTML

<!--Filter-->
          <p>Filter By Location</p>
          <select id="locfilter" name="location">
            <option value="">All</option>
            <option value="Ajax">Ajax</option>
            <option value="Barrie">Barrie</option>
            <option value="Belleville">Belleville</option>
            <option value="Bracebridge">Bracebridge</option>
            <option value="Bradford">Bradford</option>
            <option value="Brampton">Brampton</option>
            <option value="Brantford">Brantford</option>
            <option value="Burlington">Burlington</option>
            <option value="Cambridge">Cambridge</option>
            <option value="Cobourg">Cobourg</option>
            <option value="Concord">Concord</option>
            <option value="Gloucester">Gloucester</option>
            <option value="Gormley">Gormley</option>
            <option value="Guelph">Guelph</option>
            <option value="Hamilton">Hamilton</option>
            <option value="Kingston">Kingston</option>
            <option value="London">London</option>
            <option value="Milton">Milton</option>
            <option value="Napanee">Napanee</option>
            <option value="Niagara Falls">Niagara Falls</option>
            <option value="North Bay">North Bay</option>
            <option value="Ottawa">Ottawa</option>
            <option value="Owen Sound">Owen Sound</option>
            <option value="Peterborough">Peterborough</option>
            <option value="Sarnia">Sarnia</option>
            <option value="Sault Ste Marie">Sault Ste Marie</option>
            <option value="Sudbury">Sudbury</option>
            <option value="Timmins">Timmins</option>
            <option value="Toronto">Toronto</option>
            <option value="Trenton">Trenton</option>
            <option value="Waterloo">Waterloo</option>
            <option value="Windsor">Windsor</option>
            <option value="Woodstock">Woodstock</option>
          </select>

JS (only has this snippet to pull in the table)

$(document).ready(function() {
  $("#used-equip-table").DataTable();
});

Answer 1

Update your JavaScript section to this:

$(document).ready(function() {

  // create a variable for your table, so we can refer to it below:
  var table = $("#used-equip-table").DataTable();

  // add events to your drop-down control, to detect changes:
  $('#locfilter').on( 'keyup change clear', function () {
    table.draw();
  } );

  // use the following to process filter/search changes:
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      var selectedValue = $('#locfilter').val();
      if (data[4].includes(selectedValue)) { // 4 = the fifth column!
        return true;
      } else {
        return false;
      }
    }
  );

});

That ext.search.push function shown above is part of the search plug-in, described here .

Answer 2

Add an event on change of your custom filter.

Please see this -

$(document).ready(function() {
 $("#used-equip-table").DataTable();
});

$('#locfilter').on( 'change', function () {
 $('#used-equip-table').DataTable().column( 4 ).search(
   $('#locfilter').val()
 ).draw();
});

Please see working example here

Answer 3

   $("#locfilter").change(function() {
    var value = $("#locfilter").val();
    $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        return data[4]==value
            ? true
            : false
        }     
    );
    table.draw();
    $.fn.dataTable.ext.search.pop();
   });

Try this code it worked for me .