Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery DataTables: control table width

I have a problem controlling the width of a table using the jQuery DataTables plugin. The table is supposed to be 100% of the container width, but ends up being an arbitrary width, rather less than the container width.

Suggestions appreciated

The table declaration looks like this

<table id="querytableDatasets" class="display" cellspacing="0" cellpadding="3"     width="100%"> 

And the javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){       jQuery('#querytableDatasets').dataTable({           "bPaginate": false,           "bInfo": false,           "bFilter": false       });   });  `   

Inspecting the HTML in Firebug, you see this (note the added style="width: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0"  cellpadding="3" width="100%" style="width: 0px;"> 

Looking in Firebug at the styles, the table.display style has been overridden. Can't see where this is coming from

element.style {     width:0;}      -- dataTables.css (line 84 table.display {    margin:0 auto;     width:100%;   }   
like image 589
John Mac Avatar asked Mar 03 '09 02:03

John Mac


People also ask

How to fix column width in DataTable?

The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width of the column can be controlled using the columns. width option.

How do I make a DataTable smaller?

Try Cols->Utilities->Compress Selected Columns​. It will look at the data stored in the selected columns and see if there's a more compact format to store it in.


1 Answers

The issue is caused because dataTable must calculate its width - but when used inside a tab, it's not visible, hence can't calculate the widths. The solution is to call 'fnAdjustColumnSizing' when the tab shows.

Preamble

This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden (display:none) element when it is initialised). The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.

The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.

Initialisation code

$(document).ready(function() {     $("#tabs").tabs( {         "show": function(event, ui) {             var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();             if ( oTable.length > 0 ) {                 oTable.fnAdjustColumnSizing();             }         }     } );      $('table.display').dataTable( {         "sScrollY": "200px",         "bScrollCollapse": true,         "bPaginate": false,         "bJQueryUI": true,         "aoColumnDefs": [             { "sWidth": "10%", "aTargets": [ -1 ] }         ]     } ); } ); 

See this for more info.

like image 159
Arik Kfir Avatar answered Sep 26 '22 19:09

Arik Kfir