How to resize a JQuery/Datatable after hiding columns

Question

i'm using the DataTables plugin for JQuery, my problem basically lies in the fact that my datatable has to many columns and (visually) gets out of the bounds of its container (a div tag). I then hide some of the columns that are, at this point, irrelevant. But the width of the table just does not resize it self (let's say to its parent's witdh). I tried using the

fnAdjustColumnSizing()

function after creating the datatable but it doesn't seems to work (i also tried redrawing the table with fnDraw()). I tried as well to give some initial parameters in order to get a smaller size on each column

$("#reportTable").dataTable({"aoColumns":[{sWidth:"10%"},{sWidth:"10%"},{sWidth:"10%"}]});

but it throws an error since i have to "turn on" the bRetrieve parameter (which i did later on, but it didn't work, it just prevent the error to popup). So... tecnically i want to make my datatable smaller after some columns are hidden.

Thanks in advance.

Answer 1

The solution was actually simpler than I thought. Using the "inspect element" feature in google chrome I found that, when calling "datatable()" datatables's method, datatables API used a fixed width based on the space needed to display the amount of columns. It was something like 1947 pixels or so. Therefore, you cannot change this using simple css because the fixed width used by datatables had higher priority. The solution I found was using "width" jquery's method after hiding the columns:

$("#reportTable").width("100%");

since it changes the width attribute directly in the table element.