CODEWITHSUNDEEP
jqueryfilterdatatables
lbriquet
lbriquet

Reputation: 541

dataTables custom filtering of <tr> if cell contains value

How can I filter datatable rows which contain a cell with a specific value? I need to show either all rows, or only the rows with a specific value "A" in a specific column. 

        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>...</td>
            <td>A</td>
        </tr>

Here is an example of filtering by row class, but the data source I will have will not provide row classes.

The example uses:

    $.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {    
      var myRowClasses = oSettings.aoData[iDataIndex].nTr.className.split(" ");
      var grade = $('.grade-check:checked').data('grade');    
      return myRowClasses.indexOf(grade) > -1;
    });

I need to change this so that it looks for rows with which have the td value instead of rows with a class name.

http://jsfiddle.net/lbriquet/d2b6vmdm/3/

Thank you in advance for your help!!

Upvotes: 0

Views: 503

Answers (1)

davidkonrad
davidkonrad

Reputation: 85578

There are some issues here. First of all, you could reduce the redundant handling of the RadioGroup1 elements :

$('[name="RadioGroup1"]').change(function () {
   oTable.fnDraw();
});

The radio buttons dont need an id at all :

<label>
   <input type="radio" name="RadioGroup1" class="grade-check" data-grade="*" />
   All grades
</label>

have added C and X to the forked fiddle below, and changed "gradeAll" to a simple *. Now you can create the filter :

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    var filter = $('input[name=RadioGroup1]:checked').data('grade'),
        grade = aData[4];
    return grade == filter || filter == "*";
});

forked fiddle -> http://jsfiddle.net/vs0cagLj/

Upvotes: 1

Related Questions