jQuery DataTables + columnFilter plugin Overflow Issue with jQuery UI Tabs

tayvius

In my application, I'm using version 1.9.4 to display information dynamically to the user. Achieving this is fine and works great.

However in my application i have these tables within jQuery UI Tabs. At first, there was an error with dataTables not calculating the column widths correctly due to it not been visible on the screen at time of calculation (this was fixed by setting the 'bAutoWidth' property to false and calling oTable.fnAdjustColumnSizing(); which is binded to the tabs select/activate action).

The application now needs column filtering to enable data drill down which i have used the Column Filter PlugIn for.

For some reason the error has appeared again within the footer and now overflows outside the boundary of the UI Tabs (I'm assuming that the calculation for the footer column widths doesn't take place at the same time as the core table calculation).

Any help would be great :)

Debug Page: http://debug.datatables.net/epular

SAMPLE CODE

[code]
$('#Quotes').dataTable({
"bJQueryUI": true,
"aLengthMenu": [[10, 25, 50, 75, 100, 250, 500], [10, 25, 50, 75, 100, 250, 500]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": '@Url.Content("~/Home/GetQuote")',
"sPaginationType": "full_numbers",
"sScrollY": 200,
"sScrollX": "100%",
"bScrollCollapse": true,
"sScrollXInner": "110%",
"fnServerData": function Data(sSource, aoData, fnCallback) {
$.ajax({
"dataType": "json",
"contentType": "application/json; charset=utf-8",
"type": "GET",
"url": sSource,
"data": aoData,
"success":
function (msg) {
fnCallback(msg);
},
"failure":
function (errMsg) {
$('#errorMessage').text(errMsg); //errorMessage with id of the div
}
});
},
"bSort": false,
"bAutoWidth": false,
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if (aData[4] == "Target") {
$(nRow).addClass("row_FollowUpNotComplete");
}
},
"fnInitComplete": function () {
this.fnAdjustColumnSizing(true);
}
}).columnFilter({
"aoColumns": [
null, //Quote ID **Hidden**
{ "type": "text", bRegex:true }, //Customer
{ "type": "date-range" }, //Validity
{ "type": "text", bRegex: true }, //Quoted By
{ "type": "text", bRegex: true }, //TMF
{ "type": "date-range" }, //Date of follow up
{ "type": "date-range" }, //Log Date
{ "type": "text", bRegex: true }, //Trade
]
}).fnSetColumnVis(0, false);
$('.dataTables_filter').css({ "display": "none" }); //Disable search filter by css
[/code]