In my web page I have a navigation tab bar with two tabs. Each tab has a separate data table. When I initially load the page and switch between tabs the tables render properly. However when I resize the window and switch between tabs the table that was not visible when I resized is now not rendered properly. I then resize the window and the table resizes as expected but then when I switch back to the other tab now that table is not rendered properly.

In the html portion of my page I'm specifying the width of the table to 100%.

The following is my JavaScript/Jquery I'm using to construct and display the table.

var some_table = $('#some_table');

function load_some_table() {
    table = some_table.dataTable({
        "dom": 'T<"clear">lfrtip',
        "destroy": true,
        "autoWidth": true,
        "scrollX": true,
        "order": [[2, "desc"]],          
    });
}

$(document).ready(function() {
    load_some_table();
});

$(window).resize( function () {
    some_table.fnAdjustColumnSizing();
});

So how do I get it to render properly when switching between tabs and resizing my browser window?

In my web page I have a navigation tab bar with two tabs. Each tab has a separate data table. When I initially load the page and switch between tabs the tables render properly. However when I resize the window and switch between tabs the table that was not visible when I resized is now not rendered properly. I then resize the window and the table resizes as expected but then when I switch back to the other tab now that table is not rendered properly.

In the html portion of my page I'm specifying the width of the table to 100%.

The following is my JavaScript/Jquery I'm using to construct and display the table.

var some_table = $('#some_table');

function load_some_table() {
    table = some_table.dataTable({
        "dom": 'T<"clear">lfrtip',
        "destroy": true,
        "autoWidth": true,
        "scrollX": true,
        "order": [[2, "desc"]],          
    });
}

$(document).ready(function() {
    load_some_table();
});

$(window).resize( function () {
    some_table.fnAdjustColumnSizing();
});

So how do I get it to render properly when switching between tabs and resizing my browser window?

• javascript
• jquery
• html
• datatables

• you should probably share the html code to give us a better picture of what's going on. Another note, on that resize function - you are re sizing which of the two tables? – Sergio S Commented Jan 4, 2016 at 18:17
• I have a presentation page with two different methods that make ajax call to a REST service which in result returns the respected datable and place it in its corresponding tab. The code I provided is only for one table but both tables share the same logic. – ssk Commented Jan 4, 2016 at 19:02

1 Answer 1

I seemed to have fixed this myself. I don't even need the function fnAdjustColumnSizing. If set "autoWidth": false on initialization, then the data table resizes columns when the browser resizes. Seems counter-intuitive though.