Filtering based on classname

erickh

Hello everyone,

I'm trying to filter my table based on the class names.

here is my html

<table>
<tr class="alert">
<td>Jim</td>
<td>04/12/2020</td>
</tr>
<tr>
<td>Jason</td>
<td>12/08/2021</td>
</tr>
<tr class="alert">
<td>Alex</td>
<td>05/27/2021</td>
</tr>
</table>

I would like to be able to search for "alert" in my search bar, and get the first and third row as result (of course, I also want to be able to do a classic search, by "Alex" or "12/08/2021").

Here is my current code, but it filters the table automatically on page loads. I'd like to do this only when I type something into the input.

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       return $(table.row(dataIndex).node()).hasClass('alert');
   }
 $('#custom-filter').keyup(function () { // I'm using a custom input
   table.search(this.value).draw();
  });

And if you can magically tell me how to be able to sort column 3 (European date format), you will make me a very very happy man.

Thanks to all of you

kthorngren

In the search input use a condition to check the value of the input. If its blank then just return true, something like this:

$.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       if ( $('#custom-filter').val() === '' ) {
         return true;
       }
       return $(table.row(dataIndex).node()).hasClass('alert');
   }

Also you can move the code after your Datatables initialization to keep it from running on page load.

If you want to sort based on a class that is in the custom search input you can use the same $('#custom-filter').val() in place of alert.

sort column 3 (European date format)

See this blog about the recommended way to sort dates.

Kevin

erickh

Hello Kevin,

it's you again who helps me, thank you.

the problem with that method is that the filter is only based on classname.
I can't search for "Alex" anymore.

I would like to combine "Alex alert" in my search input.

You understand me ?
Thank you again

kthorngren

Inside the search plugin get the value of the input, ie $('#custom-filter').val(). Then parse it to determine if you want to search for a class, or a value or both. Then use if statements for the proper comparison. Here is some pseudo code to give you an idea, it will need tweaking to work the way you want and to handle conditions where the class is not in the search term:

var val = $('#custom-filter').val().split( " " );  // split the input to get the column search term and the class

// 'x' is the column number
if ( data[ x ] === val[0] && $(table.row(dataIndex).node()).hasClass( val[1] ) ) {
  return true;
}

return false;

Kevin

erickh

Bro

it still doesn't work as expected...

I tried using a little trick. I place a "<span class="invisible">alert</span>" where .invisible is hidden using css, and now it works....

Thank you so much for your help.

Now, I'm going to try to handle the dates.

kthorngren

it still doesn't work as expected...

Its unclear if you still need help but if you do please provide a test case showing your data and what you are trying to do.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin