Auto width for columns

akshay3004

I am using Backbone for my application. I have used DataTables for showing some stats, depending on the question ID. Now, when I load the table for the first time, the columns get proper width. But, when it is re rendered for a different question ID, the columns become too big and flow out of the the container. This is the code I have used for DataTables:

$("#summary").dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{
"bVisible": false,
"aTargets": that.x
}, {
"bSortable": false,
"aTargets": [0]
}
],
"iDisplayLength": 25,
"aaSorting": [[3, "desc"]],
"bProcessing": true,
"bServerSide": true,
"bDestroy": true,
"sAjaxSource": url + that.model.get('id'),
"fnServerData": function(sSource, aoData, fnCallback) {
aoData.push({
"name": "timestring",
"value": that.$("#daterange").val()
});
return $.getJSON(sSource, aoData, function(json) {
return fnCallback(json);
});
},
"fnDrawCallback": function(oSettings) {
var table, _results;
table = that.$("#summary").dataTable();
cols = table.fnSettings().aoColumns.length;
col = 0;
_results = [];
while (col < cols) {
if (that.shownFields.indexOf(col) === -1) {
table.fnSetColumnVis(col, false);
} else {
table.fnSetColumnVis(col, true);
}
_results.push(col++);
}
return _results;
},
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
});

You can safely assume that all the variables used like that , url, etc are working

My problem is just that the CSS breaks

Can you suggest me how to correct this error?

flashfog

Not sure if it's related but I've noticed since updating to the newest version of datatables, autowidth has stopped working correctly in many of my tables, and instead every column ends up being the same width and the table flows outside it's container.

allan

I don't think much as changes in the way column width handling has being done in 1.9.1 from 1.9.0. Could you link to your page please so I can see what is happening.

Thanks,
Allan