jQuery DataTables: control table width

John_McC_1050 0
Viewed 270996

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%;  
}
jquery-datatables datatables jquery
26 Answers

You'll want to tweak two variables when you initialize dataTables: bAutoWidth and aoColumns.sWidth

Assuming you have 4 columns with widths of 50px, 100, 120px and 30px you would do:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    });

More information on the initialization of dataTables can be found at http://datatables.net/usage

Watch for interaction between this setting of widhts and the CSS you are applying. You might comment your existing CSS before trying this to see how close you get.

user_630940

Well, I'm not familiar with that plugin, but could you reset the style after adding the datatable? Something like

$("#querydatatablesets").css("width","100%")

after the .dataTable call?

user_656960

Are you doing this in the ready event? 

$(document).ready(function() { ... });

The sizing is most likely going to be dependent on the document being fully loaded.

Mufaka_729920

Check this solution too. this solved my DataTable column width issue easily

JQuery DataTables 1.10.20 introduces columns.adjust() method which fix Bootstrap toggle tab issue

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

Please refer the documentation : Scrolling and Bootstrap tabs

user_64581580

I ran into a similar issue when having a div wrapped around the table.

Adding position: relative fixed it for me.


#report_container {
 float: right;
 position: relative;
 width: 100%;
}
user_2684370
Related