How to disable/enable Responsive on the fly

seaofinformation

Hello,

I was wondering if it was possible to disable Responsive after it is called, and then re-enable it? I want to use Responsive for certain browser widths, but at a certain breakpoint I would like to use my own custom method of styling the table, so I will need some way to force all the columns to be visible again. Is this possible? I am using the most recent DataTables (10.5) with the "responsive" class. Removing the class and calling table.responsive(false) after the table has initialized doesn't seem to work.

I don't think a working example is needed in this case -- let me know if posting one would help. Many thanks.

seaofinformation

Using some jQuery to detect the window width, I tried to add/remove the class "all". At first I thought this worked, but alas the columns keep disappearing.

$(window).bind('resize', function () {
if($(window).width() < 751){
    $("#example td").not(".control").addClass("all");
    $("td.control").addClass("never");
}else{
    $("#example td").removeClass("all");
    $("td.control").removeClass("never");
}
})

seaofinformation

To unhide the columns that are already hidden, I just call:

table.api().columns().visible(true);

If I can figure out a way to halt responsive from making the columns disappear after a certain breakpoint, then I'll have a complete solution.

I realize I'm talking to myself, but I'm learning as I go, so please bear with me.

seaofinformation

Here is my solution, as clunky as it may be.

FIrst, I set a variable in the document:

resizeWidth = true;

Then, after the table is initialized:

$(window).bind('resize', function () { 
if($(window).width() < 750){ 
if(!$(".control").hasClass("never")){
    resizeWidth = false;
    $(".control").addClass("never");
    table.api().columns([yourColumns]).visible(true);
}
}else{
    resizeWidth = true;
    $(".control").removeClass("never");
}
 })

Then, inside responsive.js:

$(window).on( 'resize.dtr orientationchange.dtr', dt.settings()[0].oApi._fnThrottle( function () {
            if(resizeWidth == true){
            that._resize();
            }
} ) );

allan

I was wondering if it was possible to disable Responsive after it is called, and then re-enable it?

Currently no there is no enable / disable option for Responsive. You would need to use a hack as you have.

Allan