Datatables aoColumns and bAutoWidth not working? - datatables

Question

This javascript
$('#example').dataTable({"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{ "width": "50%" },
{ "width": "100px" },
{ "width": "100px" },
{ "width": "50px" },
{ "width": "100px" }
]});
Together with this table
<table cellpadding="0" cellspacing="0" border="0" class="" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
</tbody>
</table>
Ends up being not a fixed size table.
First of all, I don't want it to be 100% width, and secondly, putting px or % in the js part, has no effect at all.
Am I overlooking something?
See here in this fiddle about the datatables auto column width problem

Answer 1

First of all, I would strongly recommend that you upgrade to 1.10.x -> http://www.datatables.net/download/ or at least the latest version of the 1.9-series, 1.9.4.
Then, yes - when using 1.9.0 as you are, (all 1.9.x versions) the columns width option is named sWidth. So instead :
$('#example').dataTable({
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumns": [
{ "sWidth": "50%" },
{ "sWidth": "100px" },
{ "sWidth": "100px" },
{ "sWidth": "50px" },
{ "sWidth": "100px" }
]
});
To deal with your requirement "I don't want it to be 100% width" you must specify a width for the table, or at least a max-width. Otherwise datatables will assume the table should be 100% in width, and therefore expand the "sWidth": "50%" column to whatever there is left. So if you want the table to be 700px, as an example :
#example {
width: 700px;
}
your fiddle forked -> http://jsfiddle.net/9n5vrbnz/
If you want a completely fixed width, that is, the table and the injected controls like the search box and pagination to be kept within a certain width, you can style the wrapper element. It is always named <table id>_wrapper :
#example_wrapper {
width: 700px;
}
se fiddle -> http://jsfiddle.net/1rce0d4k/