Datatables on-the-fly resizing

Question

I\'m using the marvellous DataTables jQuery plug-in; http://datatables.net/ Added the FixedColumns and KeyTable extras.

Now the table does resize prettily when the

Answer 1

What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels, hence why it won't resize with your dragging. The reason it does this is to stop the table and the columns (the column widths are also set) jumping around in width when you change pagination.

What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false.

$('#example').dataTable( {
  "autoWidth": false
} );

That will stop DataTables adding its calculated widths to the table, leaving your (presumably) width:100% alone and allowing it to resize. Adding a relative width to the columns would also help stop the columns bouncing.

One other option that is built into DataTables is to set the sScrollX option to enable scrolling, as DataTables will set the table to be 100% width of the scrolling container. But you might not want scrolling.

The prefect solution would be if I could get the CSS width of the table (assuming one is applied - i.e. 100%), but without parsing the stylesheets, I don't see a way of doing that (i.e. basically I want $().css('width') to return the value from the stylesheet, not the pixel calculated value).

Answer 2

Have you tried capturing the div resize event and doing .fnDraw() on the datatable? fnDraw should resize the table for you

Answer 3

I had the same challenge. When I collapsed some menus I had on the left of my web app, the datatable would not resize. Adding "autoWidth": false duirng initialization worked for me.

$('#dataTable').DataTable({'autoWidth':false, ...});

Answer 4

This did the trick for me.

$('#dataTable').resize()

Answer 5

You should try this one.

var table = $('#example').DataTable();
table.columns.adjust().draw();

Link: column adjust in datatable

Answer 6

$(document).ready(function() {
    $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        // var target = $(e.target).attr("href"); // activated tab
        // alert (target);
        $($.fn.dataTable.tables( true ) ).css('width', '100%');
        $($.fn.dataTable.tables( true ) ).DataTable().columns.adjust().draw();
    } ); 
});

It works for me, with "autoWidth": false,