jQuery DataTables within jQuery UI Tabs

Question

How do I adjust the jQuery DataTables columns within jQuery UI Tabs?

This is my JS code:

$('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
});

$('#myTable').DataTable();

This is how DataTables suggests the integration but how do I have to
customize the code to get working with my click-function:

$(document).ready(function() {
$("#tabs").tabs( {
    "activate": function(event, ui) {
        $( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
    }
} );

$('table.display').dataTable( {
    "scrollY": "200px",
    "scrollCollapse": true,
    "paging": false,
    "jQueryUI": true
} );
} );

https://datatables.net/examples/api/tabs_and_scrolling.html

Answer 1

try adding the function to your click event:

$('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
   $('table.display').DataTable().columns.adjust();
});

or depending on the datatables version the old api version should also work:

$('#myTab a').click(function (e) {
   e.preventDefault();
   $(this).tab('show');
   $('table.display').dataTable().fnAdjustColumnSizing();
});

Answer 2

I know this is an old question, but with the latest version of datatables, just setting style="width: 100%" on the table works, no js needed.

The solution is based on the answer from this discussion:

https://datatables.net/forums/discussion/53055/hidden-tables-made-visible-lose-formatting