Hide/show specific rows on checkbox in datatables

Question

I have a datatables table, some of the rows in my table have the class banned. I want to exclude these rows on page load, show them when a checkbox is checked, and exclude them again if the checkbox is unchecked.

Here is my code so far

<div class="field">
    <div class="ui toggle checkbox">
        <input type="checkbox" id="display_banned_songs" tabindex="0" class="hidden">
        <label>Display Banned Songs?</label>
    </div>
</div>

$('.ui.toggle.checkbox').checkbox({
    onChecked: function() {
        console.log('onChecked called');
        $.fn.dataTable.ext.search.push(
           function(settings, data, dataIndex) {
              return true;
           }
        );
    },
    onUnchecked: function() {
        console.log('onUnchecked called');
        $.fn.dataTable.ext.search.push(
           function(settings, data, dataIndex) {
              return !$(table.row(dataIndex).node()).hasClass('banned');
           }
        );
    },
    onChange: function() { table.draw() }
});

Currently, the rows are not excluded on page load, so I know that my onUnchecked method works, because I can see the rows on page load but when I check and then uncheck my checkbox, the specified rows are hidden and everything else shows.

I can't figure out why my onChecked function doesn't work, I basically need it to display all the rows (unless filtered by the search bar).

I'm also not sure how to hide the specified rows on page load.

How can I get my onChecked method working, and how can I hide the rows on page load?

Yevhen Horbunkov · Accepted Answer · 2019-07-18 10:25:44Z

Assuming, you have some property-marker within your source data (like, property banned: true) for banned items and you applied that marker as a class to target table rows <tr> with something, like:

$('table').DataTable({
    ...
    createdRow: (tr, data) => data.banned ? $(tr).addClass('banned') : true
})

You may use DataTables custom filtering feature to filter out the rows, having class 'banned' when filtering checkbox is unchecked:

$.fn.DataTable.ext.search.push((_, __, idx) => !$(dataTable.row(idx).node()).hasClass('banned') || $('#display_banned_songs').prop('checked'))

Then you may simply redraw your table upon clicking filter checkbox:

$('#display_banned_songs').on('click', () => dataTable.draw());

Complete demo of that concept you might find below:

//sample source data
const srcData = [{title:'Fixxxer',artist:'Metallica',banned:false},{title:'Humanity',artist:'Scorpions',banned:false},{title:'Turn the page',artist:'Metallica',banned:false},{title:'Baby one more time',artist:'Britney Spears',banned:true},{title:'Wrecking ball',artist:'Miley Cyrus',banned:true}];

//datatables initialization
const dataTable = $('table').DataTable({
  dom: 't',
  data: srcData,
  columns: [
    {data: 'title', title: 'Song Title'},
    {data: 'artist', title: 'Band/Artist'}
  ],
  createdRow: (tr, data) => data.banned ? $(tr).addClass('banned') : true
});

//custom filter based on 'banned' class of the row
$.fn.DataTable.ext.search.push((_, __, idx) => !$(dataTable.row(idx).node()).hasClass('banned') || $('#display_banned_songs').prop('checked'));

//show/hide banned
$('#display_banned_songs').on('click', () => dataTable.draw());

<!doctype html><html><head><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.css" /><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.18/rg-1.1.0/datatables.min.js"></script></head><body><div class="field"><div class="ui toggle checkbox"><input type="checkbox" id="display_banned_songs" tabindex="0" class="hidden" checked><label>Display Banned Songs?</label></div></div><table></table></body></html>

Mo Baqeri · Accepted Answer · 2019-07-17 14:33:32Z

-1

I believe on your page load you need to trigger checkbox to be ticked.

$('#display_banned_songs').trigger('change');

This way it will tick the checkbox on page load and show all the rows.

In regards to hiding the rows with banned class on the page load you could put the following code on your page load possibly and see if that does the trick:

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

table.draw();

I hope this helps.

Let me know if you need more help.

edited Jul 17, 2019 at 14:33

answered Jul 17, 2019 at 14:08

Mo Baqeri

3334 silver badges16 bronze badges

3 Comments

Mo Baqeri Over a year ago

@GrumpyCrouton Could you please let me know what the other half is please?

Mo Baqeri Over a year ago

I just edited the answer. See if that's what you need please.

GrumpyCrouton Over a year ago

No, my issue is that the method I use in onChecked does not work, there is no way to _un_hide the columns currently.

Collectives™ on Stack Overflow

Hide/show specific rows on checkbox in datatables

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related