Dropdown filtering in jQuery Datatables

Question

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();
});

refer this link - datatables.net/examples/api/regex.html

Alok Mali
– Alok Mali

2020-03-11 13:47:35 +00:00
Commented Mar 11, 2020 at 13:47 — Alok Mali
– Alok Mali, Commented Mar 11, 2020 at 13:47

andrewJames · Accepted Answer · 2020-03-11 13:48:59Z

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.

answered Mar 11, 2020 at 13:48

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jerrin stephen · Accepted Answer · 2020-03-11 14:05:22Z

1

   $("#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 .

answered Mar 11, 2020 at 14:05

Jerrin stephen

2243 silver badges13 bronze badges

Comments

Alok Mali · Accepted Answer · 2020-03-11 13:55:51Z

0

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

answered Mar 11, 2020 at 13:55

Alok Mali

2,8913 gold badges20 silver badges33 bronze badges

1 Comment

JD Fill Over a year ago

Awesome! Thanks @Alok!

Collectives™ on Stack Overflow

Dropdown filtering in jQuery Datatables

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related