3

I am new to the jQuery dataTables plugin found on https://datatables.net/

I am trying to implement a custom filter for the table:

Basically, when I click a button, a custom filtering function will test the value of column #1 (numeric value) for all rows, and if the value in the column < 50 for a row, the row stays, otherwise the row is hidden.

The concept should be very simple, but I can't seem to find the right way to use the API:

  • column.filter() returns an array of column value
  • column.search() can only accept text data (not function)

What's the API that can achieve the effect?

Is there anything like the following?

var api = $('#table').DataTable();

api.column(1).data().somefilterfunction(function (val, ind) {
    return parseFloat(val) < 50;
}).draw();
davidkonrad
  • 83,997
  • 17
  • 205
  • 265
SamuelC
  • 219
  • 1
  • 3
  • 13

1 Answers1

14

Have you seen this article in the documentation -> https://datatables.net/examples/plug-ins/range_filtering.html ??

You can create a custom filtering function on-the-fly, triggered by a button :

<button id="filter">filter < 50</button>

script :

$("#filter").click(function() {
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            return parseFloat(data[0])<50
                ? true
                : false
        }     
    );
    table.draw();
    $.fn.dataTable.ext.search.pop();
});

demo -> http://jsfiddle.net/dpwgqs2o/

Notice that the filter is created inside the click handler itself, and removed again as soon the table is drawn. This makes the filter temporary, i.e when the user click on a column header, the filter is cleared. If you want a permanent filter, make the filter global and do not remove it.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • is there any explanation if that wont work for me? The pushed function never triggers – John Smith Oct 21 '15 at 13:15
  • 1
    @JohnSmith, are you initializing the dataTable with `dataTable()`, lowercase `d`? – davidkonrad Oct 21 '15 at 13:34
  • 1
    @JohnSmith, you could paste your code into the fiddle above and let me check it out (paste the code in, update and tell what the new url is) – davidkonrad Oct 21 '15 at 14:39
  • if I have multiple DataTables in my page, it seems it is applying for all data tables in my page. How can I restrict this search only for one data table. Thank you in advance – Azeez Jun 20 '17 at 16:42
  • 1
    @Azeez, there is no builtin logic for this, filters are pushed to a global array. But you could look at this -> https://stackoverflow.com/questions/52331479/date-range-inside-loop-of-multiple-datatable-in-the-same-page (I know, late comment) – davidkonrad Oct 22 '18 at 22:09
  • @davidkonrad Thanks for the link – Azeez Nov 02 '18 at 10:34
  • Is this client-side only? https://datatables.net/examples/plug-ins/range_filtering.html (I am assuming yes). I am also guessing a server-side would have to use ajax and a where clause. Something like https://stackoverflow.com/questions/33883925/datatables-custom-filtering-with-server-side –  Feb 04 '19 at 13:57
  • @davidkonrad Is there a way to have the filter not be created, but just applied when the button is clicked? So when I click the filter on button, the filter is applied. When I click the filter off button, the filter is removed. I know I can use the pop(); function in the filter off button, but if I hit the filter on button multiple times, I will have the click the filter off the same amount of times to remove the filter. – Fetcgubgs Aug 18 '22 at 17:29