jQuery JavaScript Datatables columns condense/squeeze together

Question

Ok I am finding a problem when loading datatables on a table that's in a hidden element on my page. What I have are a handful of pages that are "Tab" based, where the only thing visible at the time is the active tab, while all the other tabs at the time til activated are display:none. When I manually invoke a tab to be the primary tab there is no issue with the table or its columns. Its only when the tabs are initially hidden the problem with the initial display of the table is a problem.

I say initial display because when I click on a column header to sort a given column the table seems to correct itself and the columns no longer squeeze/condense together.

This is my current datatable code

$('#'+tableID).dataTable(
{
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": false,
    "bAutoWidth": true,
    "sScrollY": tableY+"px",
    "bScrollCollapse": true,
    "oLanguage": {
        "sInfo": "Showing _END_ Events."
    },
    "aaSorting": [[ 1, "asc" ]],
    "aoColumns": [
         null,
         null
       ]
});

and I have tried to specify column widths like:

"aoColumns": [
         { "sWidth": "80%" },
         { "sWidth": "20%" }
       ]

which also doesn't work. So I am stuck at the moment, trying to resolve this issue but not really sure where/how to begin.

Also for the sake of argument lets say my table structure resembles..

<table>
   <thead>
     <tr><td></td><td></td></tr>
   </thead>
   <tfoot>
     <tr><td></td><td></td></tr>
   </tfoot>
   <tbody>
     <tr><td></td><td></td></tr>
     <tr><td></td><td></td></tr>
     <tr><td></td><td></td></tr>
   </tbody>
</table>

Have you explored any of the answers given in this question: http://stackoverflow.com/questions/604933/jquery-datatables-table-width-problem? The accepted answer included a relevant datatables link: http://datatables.net/examples/api/tabs_and_scrolling.html — mg1075, May 31 '12 at 03:46
After much more searching before and after this post. I ended figuring out a solution. I knew it had to do with the fact the element was hidden and the way it was as the browsers dont account for width/height etc on an element with display:none. Of course the way the system I am working with is developed it made assessing the issue a bit harder than it should have been but in the end it was tied to jquery ui and binding to the "tabs" event outside of the normal method given in examples I found else where. — chris, May 31 '12 at 18:51

score 0 · Accepted Answer · answered May 31 '12 at 19:00

I ended up solving my own issue through my searches, and based off an example given on the API docs related to datatables/jquery ui.

My solution was to bind to the tab event of jquery ui, then fire off my function to build the table I needed base on what tab was selected.

$(document).ready(function() {
    $("#storage").bind('tabsselect', function(event, ui)
    {
        if (ui.index === 1)
        {
            tables.statistics("metrics", "metric");
        }
    });
});

jQuery JavaScript Datatables columns condense/squeeze together

1 Answers1