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
});

Zakaria Acharki · Accepted Answer · 2017-06-19 19:02:49Z

10

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>

answered Jun 19, 2017 at 19:02

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

3 Comments

Austin Over a year ago

awesome...that's what I was looking for. how does pop() work? does it just remove the last set search or all searches.

Zakaria Acharki Over a year ago

Glad i could helps. pop() function clear the filter applied so far...

ttemple Over a year ago

I had to redeclare my datatable inside the custom search filter to prevent cannot-read-property-row-of-undefined error, like this: dt = $("#table").DataTable();

Collectives™ on Stack Overflow

jQuery datatables filter row with specific class

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related