Initial draw, column sizes, table size

Taylor514ce

I'm using the Jquery UI "tabs" widget, and have datatables on "tabs" that may not have initial focus. If the table has focus while it's loading, it renders OK.

If the datatable is on a hidden tab, then when the user clicks the tab the column headings are all at default size, not lined up over the data. If the user changes the window geometry while the table has focus, everything "fixes itself".

I suspect that datatables cannot properly size/format the table because the tab is hidden so it can't properly calculate widths and heights.

Any suggestions on how to resolve?

bindrid

I resolved it buy using the tabs changed event handler. I do not apply DataTable to the table until it is visible.

kthorngren

Another option is to use columns.adjust() when making the tab visible.

Kevin

Taylor514ce

bindrid: would this cause the table to load completely every time the user navigates away from and back to the tab? I see it's basically moving the datatable building out of the document ready event and onto the "tab ready" event, and I'm not sure that's the approach I want to take with my site.

bindrid

@Taylor514ce ,

I test to see if the table has been created or not.

I like this approach because it does not keep my user waiting for all tables to be created before they can start working with the first tab.

Actually, mine is a little bit more complicated than below because my interface actually "remembers" the last tab the user was on between sessions and puts them back there then next time they come back to the page (this done via localStorage)

        $("#divTopLevelTabControl").tabs({
            // used in pinTabs, ignored in Tabs to set the name of local storage.
      
 
            activate: function (evtObj, ui) {
                // my panel and table have the same base name so
                var newId = ui.newPanel.attr("id");
                var tableId = newId.replace("tab", "tbl");
                if (!$.fn.dataTable.isDataTable("#" + tableId)) {
                    $("#" + tableId).DataTable();
                }


            }
        });

Taylor514ce

Accepted all answers, as there is certainly more than one way to skin the cat!

I'll use your approach for some tables, and column.adjust() on others. Thank you both!

bindrid

opps, ignore the comment about pinTabs. I extended ui tabs to give the user the ability to "pin" a tab so it always comes up as the active tab if click on the push pin shown in the tab button.

Taylor514ce

Hmm, I'm still not getting it.

  $("#tabs").tabs( { 
    fx: { opacity: 'toggle', duration: 'fast' },
    activate: function (event, ui) { 
      var newId = ui.newPanel.attr("id");
      var tableId = newId.replace("tab", "tbl");
      tableId.columns.adjust().draw();
    }
  } );

My markup:

      <div id="tabProcesses">
        <table id="tblProcesses">
          <thead>
          <tr>
            <th style="cursor: pointer;">ID</th>
            <th style="cursor: pointer;">Process Name</th>
            <th style="cursor: pointer;">Active</th>
            <th style="cursor: pointer;">Group Name</th>
            <th style="cursor: pointer;">Status</th>
            <th style="cursor: pointer;">Status Icon</th>
            
          </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>

If I stick an alert in the activate function to return the ID of my table, it returns the proper table. Because I use the exact same naming syntax as you, clicking the "tab" returns an ID I can use to get the ID of the table. But the columns stay at default size. So my event is firing but the columns.adjust().draw() doesn't appear to be working.

bindrid

$("#tabs").tabs( { 

  fx: { opacity: 'toggle', duration: 'fast' },

  activate: function (event, ui) { 

    var newId = ui.newPanel.attr("id");

    var tableId = newId.replace("tab", "tbl");

  $("#" +  tableId).DataTable().columns.adjust().draw();

  }

} );

Taylor514ce

Of course. Silly me. The variable contains the ID, not the datatable object.