dataTables custom filtering by class name of <tr>

Question

I read the documentation at http://datatables.net/examples/plug-ins/range_filtering.html for filtering by a range, but I don't quite understand how to filter items by a row's class.

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

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

They would both show up by default. When someone clicks one of the buttons, all rows with "do_filter" are hidden, and dataTables redraws the list so that this change occurs throughout all pages.

mg1075 · Accepted Answer · 2013-07-09 04:29:55Z

7

Here's a fork of a datatables fiddle that was used for something entirely different.

http://jsfiddle.net/72xGx/

This sample takes the 'range filtering' example on the datatables site as a starting point. It uses checkboxes to determine if a filter should be applied, and all filters are on by default. As you check and un-check the checkboxes, they data in the table should accordingly filter. No doubt this could stand some cleaning up, but I believe you will find it is one route to accomplish your stated 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
(so as to note some of the css classes on the <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>

edited Jul 9, 2013 at 4:29

answered Jul 9, 2013 at 4:07

mg1075

18.2k8 gold badges63 silver badges102 bronze badges

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

2 Comments

Max Williams Over a year ago

Thanks for this - oSettings.aoData[iDataIndex].nTr.className; was the missing piece of the jigsaw for me. Couple of notes: i think you're missing the ); for the $.fn.dataTableExt.afnFiltering.push( - should be before $(function () {. Also, in case anyone else (like me) is using DataTables 1.10 onwards, you need to call table.draw() rather than table.fnDraw() to make the table refresh itself.

Max Williams Over a year ago

Also, a cleaner way to test the class is to split it into an array of classnames and see if that array contains the class you're testing. So, you can say var myRowClasses = oSettings.aoData[iDataIndex].nTr.className.split(" "); and then test like if(myRowClasses.indexOf('gradeA') > -1)

Collectives™ on Stack Overflow

dataTables custom filtering by class name of <tr>

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related