DataTables selective filtering by class name <tr>

Question

I read the documentation at http://datatables.net/examples/plug-ins/range_filtering.html for filtering by range, but I don’t quite understand how to filter elements by line class.

I want to have several buttons that, when clicked, filter the dataTable by the classes (string values) of each row. For example, if you have

<tr class="dont_filter"> <tr class="do_filter"> 

They will both appear by default. When someone clicks on one of the buttons, all lines with "do_filter" are hidden, and dataTables redraws the list so that this change occurs on all pages.

Answer 1

Here's the fork of the datatables script that was used for something completely different.

http://jsfiddle.net/72xGx/

This example takes the “range filtering” example on the datatables website as a starting point. It uses checkboxes to determine whether to apply a filter, and all filters are enabled by default. When you check and uncheck the boxes, their data in the table should be filtered accordingly. Without a doubt, this can withstand some cleaning, but I believe that you will find that this is one of the ways to achieve your goal.

Javascript

 /* Custom filtering function which will filter data in column four between two values */ $.fn.dataTableExt.afnFiltering.push( function (oSettings, aData, iDataIndex) { var gA = $('#ckb-gradeA').is(':checked'), gC = $('#ckb-gradeC').is(':checked'), gU = $('#ckb-gradeU').is(':checked'), gX = $('#ckb-gradeX').is(':checked'); var myRowClass = oSettings.aoData[iDataIndex].nTr.className; if (myRowClass === 'gradeA' || myRowClass === 'gradeA even' || myRowClass === 'gradeA odd') { return gA === true ? true : false; } else if (myRowClass === 'gradeC' || myRowClass === 'gradeC even' || myRowClass === 'gradeC odd') { return gC === true ? true : false; } else if (myRowClass === 'gradeU' || myRowClass === 'gradeU even' || myRowClass === 'gradeU odd') { return gU === true ? true : false; } else if (myRowClass === 'gradeX' || myRowClass === 'gradeX even' || myRowClass === 'gradeX odd') { return gX === true ? true : false; } else { return false; } }); $(function () { /* Initialise datatables */ var oTable = $('#example').dataTable(); /* Add event listeners to the two range filtering inputs */ $('#ckb-gradeA').change(function () { oTable.fnDraw(); }); $('#ckb-gradeC').change(function () { oTable.fnDraw(); }); $('#ckb-gradeU').change(function () { oTable.fnDraw(); }); $('#ckb-gradeX').change(function () { oTable.fnDraw(); }); }); 

part of the html table structure
(to mark some of the css classes for <tr> elements)

  <tr class="gradeC"> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> </tr> <tr class="gradeA"> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> </tr>