I am wondering if there is a simple way to allow a JQuery datatable to re-size itself while the user is using a browsers zoom-in, zoom-out features. Currently When I zoom in and out on my data table the data either shrinks or grows too large for the table. And I also noticed that after I zoom out or in I can refresh the page and the datatable resizes itself to how it should look. Any insight or possible redirection to a question where this has been answered (could not find one) would be appreciated. Thanks.

Here are my JavaScript table properties:

    "bJQueryUI": true,
    "bStateSave": true,
    "iDisplayLength": 50,
    "aaSorting": [[4, "desc"], [5, "asc"]],
    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "sPaginationType": "full_numbers",
    "sScrollY": "35em",
    "sScrollX": "100%",
    "bScrollCollapse": true

I am wondering if there is a simple way to allow a JQuery datatable to re-size itself while the user is using a browsers zoom-in, zoom-out features. Currently When I zoom in and out on my data table the data either shrinks or grows too large for the table. And I also noticed that after I zoom out or in I can refresh the page and the datatable resizes itself to how it should look. Any insight or possible redirection to a question where this has been answered (could not find one) would be appreciated. Thanks.

Here are my JavaScript table properties:

    "bJQueryUI": true,
    "bStateSave": true,
    "iDisplayLength": 50,
    "aaSorting": [[4, "desc"], [5, "asc"]],
    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
    "sPaginationType": "full_numbers",
    "sScrollY": "35em",
    "sScrollX": "100%",
    "bScrollCollapse": true

• javascript
• jquery
• datatables

3 Answers 3

You can tie a datables redraw event to a window re-size function:

$(window).resize(function() {
    oTable.fnDraw(false)        
});

This assumes you initialized your table with the variable oTable like this:

var oTable = $("#tableName").dataTable({
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
});

You could also set the table in question to have style="width:100%;" and then use the "bAutoWidth":false option for DataTables. It then maintains your width and you don't actually need a redraw. Especially for tables doing plex Server side processing tables, this is quite a bit lighter. For the HTML just change the style

<table id="tableName" style="width:100%;">...</table>

And then your DataTables add the option:

var oTable = $("#tableName").dataTable({
    // Your other options here...
    "bAutoWidth":false
});

You need to re-draw table when window resizes:

$(document).ready(function() {
   //Load datatable here

   $(window).bind('resize', function () {
      table.draw();
   });
});