How To hide FooTable Columns Dynamically?

Question

I have tried this code but it works for once but not every time.

$('.rptEmail').attr('data-ignore','true');
$('.rptEmail').attr('data-hide','all');
 $('#ReportMainGrid').trigger('footable_redraw');

I have tried other trigger also but nothing works properly.

Answer 1

I'm surprised no one else has had this problem. After pecking around the code, it looks like the data attributes for the rows are pulled using the .data() jquery function. The problem with this is (from what I understand) the function will populate on initial page load. What this means is, even though you change the data-hide attribute with .attr(), .data() will still hold the old value.

To get around this, without touching the Footable code, you can simply use the .data() function to change the column's property.

$("PATH_TO_TH").data("hide", "all");      //Set this to whatever you'd like
$('.footable').data('footable').reset();
$('.footable').footable();

Answer 2

If you want to use FooTable functions you can do this:

FooTable.get('#FooTable_ID').columns.get(col_id).visible = false;
FooTable.get('#FooTable_ID').draw();

where col_id is the index of the column you want to work with.

Answer 3

Sorry to jump in on this very old question but a much simpler method is to call .toggle or .hide/.show via jquery:

$('table td:nth-child(1),th:nth-child(1)').hide();

The above code will hide the header and the associated column rows.