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>

Answer 1

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");
        }
    });
});