jQuery datatables filter row with specific class

Question

I am working on a jQuery Datatable project where I need to filter the data based on specific row classes. I'm adding classes to my rows upon row creation based on a condition. I'm trying to figure out a way for my user to click a button which would apply a filter that only displays rows that contain a specific class.

I've tried a few different solutions but I can't seem to make it work. Does anyone know how to do this correctly?

Here is the JSFiddle

$('#table').DataTable({
data: data,
columns: [
    { 
        "data": "item1",                      
        "render": function ( data, type, row ) {
            if(type === 'display'){
                return "<span class='format1'>"+data+"</span>";
            }else if(type === 'sort'){
                return data;
            }else if(type === 'filter'){
                return data;
            }else{
                return data;
            }
        }
    },
    { 
        "data": "item2",                      
        "render": function ( data, type, row ) {
            if(type === 'display'){
                return "<span class='format2'>"+data+"</span>";
            }else if(type === 'sort'){
                return data;
            }else if(type === 'filter'){
                return data;
            }else{
                return data;
            }
        }
    }   
],
createdRow: function ( row, data, index ) {
    if (data.item2 == 'this is item 2 - meets condition1') {
        $(row).addClass('condition1');
    }
    if (data.item2 == 'this is item 2 - meets condition2') {
        $(row).addClass('condition2');
    }
}
});

$('#btn-filter').on('click',function(){
    //// only show table data that contains the class condition1
});
$('#btn-undo').on('click',function(){
    //// remove the filter that was applied with btn-filter
});

Answer 1

Working fiddle .

You could use :

$.fn.dataTable.ext.search.push(
   function(settings, data, dataIndex) {
       return $(table.row(dataIndex).node()).hasClass('condition1');
   }
);

To filter the table, then to reset it just use :

$.fn.dataTable.ext.search.pop();

Note that you should refdraw after the both actios.

Hope this helps.

 let data = [{ "item1": "this is item 1 - data set 1", "item2": "this is item 2 - meets condition1" }, { "item1": "this is item 1 - data set 2", "item2": "this is item 2" }, { "item1": "this is item 1 - data set 3", "item2": "this is item 2 - meets condition2" }, { "item1": "this is item 1 - data set 4", "item2": "this is item 2 - meets condition1" }, { "item1": "this is item 1 - data set 5", "item2": "this is item 2" }, { "item1": "this is item 1 - data set 6", "item2": "this is item 2" }, { "item1": "this is item 1 - data set 7", "item2": "this is item 2 - meets condition1" }, { "item1": "this is item 1 - data set 8", "item2": "this is item 2 - meets condition2" }, { "item1": "this is item 1 - data set 9", "item2": "this is item 2" }]; var table = $('#table').DataTable({ data: data, columns: [ { "data": "item1", "render": function ( data, type, row ) { if(type === 'display'){ return "<span class='format1'>"+data+"</span>"; }else if(type === 'sort'){ return data; }else if(type === 'filter'){ return data; }else{ return data; } } }, { "data": "item2", "render": function ( data, type, row ) { if(type === 'display'){ return "<span class='format2'>"+data+"</span>"; }else if(type === 'sort'){ return data; }else if(type === 'filter'){ return data; }else{ return data; } } }], createdRow: function ( row, data, index ) { if (data.item2 == 'this is item 2 - meets condition1'){ $(row).addClass('condition1'); } if (data.item2 == 'this is item 2 - meets condition2'){ $(row).addClass('condition2'); } } }); $('#btn-filter').on('click',function(){ $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { return $(table.row(dataIndex).node()).hasClass('condition1'); } ); table.draw(); }); $('#btn-undo').on('click',function(){ $.fn.dataTable.ext.search.pop(); table.draw(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/> <input type="button" id="btn-filter" value="click to select only condition1"/> <input type="button" id="btn-undo" value="click to undo what '#btn-filter' did"/> <br/><br/> <table id="table"></table>