Datatables on-fly resizing

Question

I am using the wonderful jQuery DataTables plugin; http://datatables.net/ FixedColumns and KeyTable add-ons added.

Now the table resizes nicely when resizing the window. However, the containing table div can also be resized using jQuery animation, and I have not found a way to resize the table with it - it just stagnates in its original width. Only if I changed the width of the div in the code before pageload, the table will be resized correctly.

How can I resize DataTable data on the fly to fit the width of the window and the width of the div? Thank you in advance!: -)

Answer 1

What happens is that the DataTables sets the width of the CSS table when it is initialized with the calculated value - this value is in pixels, so it will not change when dragging and dropping. The reason for this is to stop the table and columns (the width of the columns is also set) by jumping in width when you change the pagination.

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

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

This will stop the DataTables by adding its estimated width to the table, leaving your (presumably) width: 100% alone and allowing you to resize. Adding relative width to the columns would also help stop the columns bouncing off.

Another option built into DataTables is to set the sScrollX parameter to enable scrolling, since DataTables will set the table to 100% the width of the scrollable container. But you may not need to scroll.

The prefect's solution would be if I could get the width of the CSS table (provided that it is applied, i.e. 100%), but without parsing the style sheets, I see no way to do this (i.e. basically want $ ( ). css ('width') to return the value from the stylesheet, not the calculated pixel value).

Answer 2

I know this is old, but I just solved it with this:

  var update_size = function() { $(oTable).css({ width: $(oTable).parent().width() }); oTable.fnAdjustColumnSizing(); } $(window).resize(function() { clearTimeout(window.refresh_size); window.refresh_size = setTimeout(function() { update_size(); }, 250); }); 

Note. This answer applies to DataTables 1.9

Answer 3

It helped me.

 $('#dataTable').resize() 

Answer 4

 $(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, "autoWidth": false,

Answer 5

You must try this.

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

Link: column is configurable in datatable

Answer 6

Use "bAutoWidth": false and view the example below. He works for me.

Example:

 $('#tableId').dataTable({ "bAutoWidth": false }); 

Answer 7

may be a late one, as well as another answer, but I did this at the beginning of this year, and the solution I came up with uses css.

  $(window).bind('resize', function () { /*the line below was causing the page to keep loading. $('#tableData').dataTable().fnAdjustColumnSizing(); Below is a workaround. The above should automatically work.*/ $('#tableData').css('width', '100%'); } ); 

Answer 8

Have you tried to capture the div resize event and make .fnDraw() in a datatable? fnDraw should resize the table for you

Answer 9

I got this to work as follows:

First, make sure that in the definition of dataTable your dataTable array contains sWidth data, expressed as% unfixed pixels or ems. Then make sure that the bAutoWidth property bAutoWidth set to false Then add a little bit, but JS:

 update_table_size = function(a_datatable) { if (a_datatable == null) return; var dtb; if (typeof a_datatable === 'string') dtb = $(a_datatable) else dtb = a_datatable; if (dtb == null) return; dtb.css('width', dtb.parent().width()); dtb.fnAdjustColumSizing(); } $(window).resize(function() { setTimeout(function(){update_table_size(some_table_selector_or_table_ref)}, 250); }); 

It works with processing, and my table cells process CSS white-space: wrap; (which did not work without installing sWidth , and that is what led me to this question.)

Answer 10

I had the same problem as the OP. I had a DataTable that wouldn't change its width after the animation jQuery (toogle ("fast")) resized its container.

After reading these answers and many attempts and errors, this did the trick for me:

  $("#animatedElement").toggle(100, function() { $("#dataTableId").resize(); }); 

After many tests, I realized that I needed to wait for the animation to complete for dataTables to calculate the correct width.

Answer 11

I had the same challenge. When I crashed some of the menus that I had to the left of my web application, the data would not change. Adding "autoWidth": false duirng initialization worked for me.

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

Answer 12

The code below is a combination of Chintan Panchal’s response along with a comment by Antoine Leclair (placing the code in a window resize event). (I didn’t need the dissent mentioned by Antoine Leclay, however this may be best practice.)

  $(window).resize( function() { $("#example").DataTable().columns.adjust().draw(); }); 

It was an approach that worked in my case.

Answer 13

Several dataTables and tabs can be done dynamically. In my case, all tables have a responsive class

  $(document).ready(function() { $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) { const target = $(e.target).data('target'); const tab = $(target); if(tab.find('table.responsive')){ tab.find('table.responsive').DataTable().columns.adjust().draw(); } }); });