CODEWITHSUNDEEP
javascriptjqueryhtmldatatables
ssk
ssk

Reputation: 317

dataTables not resizing properly when changing window size and switch between nav tabs

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?

Upvotes: 3

Views: 4974

Answers (1)

ssk
ssk

Reputation: 317

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.

Upvotes: 7

Related Questions