CODEWITHSUNDEEP
javascriptdatatableresponsive-design
Remy Grandin
Remy Grandin

Reputation: 1686

Datatable responsive - show and hide column

I have a datatable on which I would like to be able to show and hide a specific column when the user click on a button.

As I use the responsive plugin, I declared in the column with the class none to hide it by default : 

{
    name: "MyCol",
    className: "none"
}

So, on click on my button, I try to show the column : 

$("#tblPPMTLines").DataTable().column(-1).visible(true);

This work as intended but as soon as the viewport change either way (larger or smaller), the responsive plugin seem to kicks in and re-hide the column.

Is there any way to hide and de-hide a column in a responsive datatable ?

Upvotes: 0

Views: 5416

Answers (1)

Remy Grandin
Remy Grandin

Reputation: 1686

I finaly found the answer.

When using the responsive plugin, it's no use setting the visibility through the .column(ID).visible(true|false).

You must change the classes of the header and rebuild the datatable : 

$(table.column(ID).header()).addClass( 'never' );
// OR
$(table.column(ID).header()).removeClass( 'never' );

table.responsive.rebuild();
table.responsive.recalc();

Sources : https://datatables.net/reference/api/responsive.rebuild()

Thanks to Deepak Biswal to have me look again at a link I had (too quickly ?) dissmissed :-)

Upvotes: 2

Related Questions