CODEWITHSUNDEEP
javascriptjquerydatatables
Emphram Stavanger
Emphram Stavanger

Reputation: 4214

Datatables on-the-fly resizing

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 window size is changed. However, the containing div of the table can also be resized in width by a jQuery animation, and I haven't found a way to resize the table with it-- it just stays stagnant in its original width. Only if I change the div width in the code before pageload, the table is resized correctly.

How can I make the DataTable resize on-the-fly according to both the window width and the containing div width?

Upvotes: 67

Views: 153026

Answers (13)

ni hao
ni hao

Reputation: 11

For me below does an excellent job where it keeps track of the previous size of datatable and if it has changed within a 250 ms period then it will invoke column adjust draw on the concerned datatable.

var mapDTWidth = new Map();

window.setInterval(function() {
    $($.fn.dataTable.tables( true ) ).each(function(index) {
        var elId = $(this).attr('id');
        // console.log('DT ID: ', elId, ', width:', $(this).width(), ', prev:', mapDTWidth.get(elId));
        if (elId) {
            var prevWidth = mapDTWidth.get(elId);
            if (!prevWidth) {
                prevWidth = $(this).width();
                mapDTWidth.set(elId, prevWidth);
            }
            if (prevWidth != $(this).width()) {
                // doing a redraw
                console.log("Columns adjust for ", elId);
                $(this).DataTable().columns.adjust().draw();
                mapDTWidth.set(elId, $(this).width());
            }
        }
    });
}, 250);

Upvotes: 0

StackOverflowUser
StackOverflowUser

Reputation: 1123

The code below is the combination of Chintan Panchal's answer along with Antoine Leclair's comment (placing the code in the windows resize event). (I didn't need the debounce mentioned by Antoine Leclair, however that could be a best practice.)

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

This was the approach that worked in my case.

Upvotes: 1

Emmanuel Robert Ssebaggala
Emmanuel Robert Ssebaggala

Reputation: 75

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, ...});

Upvotes: 4

Allan Jardine
Allan Jardine

Reputation: 5463

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).

Upvotes: 152

Rui Martins
Rui Martins

Reputation: 3848

$(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,

Upvotes: 16

Stephen
Stephen

Reputation: 3432

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

Upvotes: 45

Chintan Panchal
Chintan Panchal

Reputation: 311

You should try this one.

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

Link: column adjust in datatable

Upvotes: 10

Alberto Hormazabal
Alberto Hormazabal

Reputation: 121

I was having the exact same problem as OP. I had a DataTable which would not readjust its width after a jQuery animation (toogle("fast")) resized its container.

After reading these answers, and lots of try and error this did the trick for me:

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

After many test, i realized that i need to wait for the animation to finish for dataTables to calculate the correct width.

Upvotes: 1

user2314493
user2314493

Reputation: 91

Use "bAutoWidth": false and go through the example given below. It is working for me.

Example:

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

Upvotes: 8

jps
jps

Reputation: 1080

This did the trick for me. 

$('#dataTable').resize()

Upvotes: 23

mezzie
mezzie

Reputation: 1296

might be late also like the other answer but I did this early this year and the solution I came up with is using 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%');
    } );

Upvotes: 2

Dave Sag
Dave Sag

Reputation: 13486

I got this to work as follows:

First ensure that in your dataTable definition your aoColumns array includes sWidth data expressed as a % not fixed pixels or ems. Then ensure you have set the bAutoWidth property to false Then add this little but of 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);
});

Works a treat and my table cells handle the white-space: wrap; CSS (which wasn't working without setting the sWidth, and was what led me to this question.)

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6955

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

Upvotes: 1

Related Questions