How to filter OUT specific rows with DataTables

Question

I am using jQuery DataTables and I would like to know how I can filter OUT rows of my table to show and hide them depending on the state of a checkbox. If my 'Hide' checkbox is checked then hide rows where class=var and if checkbox is not checked show rows where class=var

I have setup a small demo with the ability to hide/remove the rows I want but this doesn't allow the rows to reappear.

http://jsfiddle.net/bcraig/cY8Cn/2/

$('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false,  "aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();   

$('#hide').click(function() {
    if ($(this).is(':checked')) {
        oTable.row('.takenstock, .takensold').remove().draw(true);
        $('label').text("Show taken");
    } else {
        oTable.draw();
        $('label').text("Hide taken");
    }
});

Amr Shawqy · Accepted Answer · 2014-06-25 01:24:13Z

1

You have to use the DataTables filters, I changed the code to be like below, you can check it in action in fiddle example:

http://jsfiddle.net/cY8Cn/4/

Also here you are the filtering documentation from DataTables: http://www.datatables.net/development/filtering

$('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false,  "aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();   

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
      var nTr = oSettings.aoData[ iDataIndex ].nTr;

      if (($(nTr).hasClass('takenstock') || $(nTr).hasClass('takensold')) 
          && $('#hide').is(':checked')) {
          return false;
      }
      else {
          return true;
      }
    }
);

$('#hide').click(function() {
    oTable.draw();

    if ($(this).is(':checked')) {
        $('label').text("Show taken");
    } else {
        $('label').text("Hide taken");
    }
});

answered Jun 25, 2014 at 1:24

Amr Shawqy

1266 bronze badges

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

1 Comment

Justin Over a year ago

Unchecking the box and clicking Hide/Show Taken still results in the row behind hidden even after unchecking the box. Also only works with the first set of input after clicking Hide/Show taken

Collectives™ on Stack Overflow

How to filter OUT specific rows with DataTables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related