When I dynamically resize the container before initiating datatables, column sizes are not set right

carbontwelve

My init code for datatable is the following, I include it within a function so that once I have dynamically resized my html page to the right proportion depending upon screen size I can initiate the datatable.
[code]

function setupTable() {
var oTable = $("#datatable").dataTable( {
"sScrollY": getSideWindowTableHeight() + "px",
"bScrollInfinite": true,
"bProcessing": false,
"bLengthChange": false,
"bScrollCollapse": false,
"iDisplayLength": 50,
"bServerSide": true,
"bJQueryUI": true,
"bStateSave": false,
"aaSorting": [[0,"ASC"]],
"aoColumns": [{ "sName" : "id", "bSortable": true, "bSearchable": true },{ "sName" : "modified" },{ "sName" : "slug" },{ "sName" : "title" },{ "sName" : "public" },{ "sName" : "Actions", "bSortable": false, "bSearchable": false } ],
"fnDrawCallback": function () {$(".onClickAction").click(function(){var oca_id=$(this).attr("id"); var oca_url=$(this).attr("href"); $.get(oca_url, function(data) { alert(oca_id); $("#" + oca_id).text(data); }); return false; });$(".popup").fancybox({ 'width' : 900, 'height' : 367, 'autoScale' : false, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'iframe' });},
"sAjaxSource": "/admin/pages"
} );
}

[/code]

This is the code I use to resize the containing div, alertSize is a function that returns the width of the browser accurately.

[code]

$(document).ready(function() {
$(".contentpane").width(alertSize('w') - 270);
setupTable();
});

[/code]

Before I resized the contentpane div the tables columns where nicely spaced, now they are not. Do you guys have any ideas?

allan

I think this sounds like it might be a job for DataTables 1.9 (beta): http://datatables.net/beta/1.9/examples/basic_init/flexible_width.html :-). Add 'width="100%"' to your TABLE tag and use 1.9.beta.1 and hopefully that will do it.

Allan