DataTable with FixedColumn is not getting horizontal scroll bar

rket

Hi,
I have created dataTable with fixed columns using "sScrollX": "100%" and "sScrollXInner": "150%". My dataTable also has Tabs in it and I am displaying the data based on filter in each tab.
When I load the page first time I am seeing the horizontal scroll bar and once I click on any column for sorting or I click next/previous page the scroll bar disappears, if I click again any column or click next/previous page scroll bar appears back. Horizontal scroll bar is appearing and disappearing with click that I make on the UI.
I am having the same problem when I change the tab.
If I user "bJQueryUI":true because of my fixed columns sorting is not working. only non fixed columns are getting sorted also when I change the tab some error is occurring and returned to home page.
How can control to always have the horizontal scroll. I have pasted the relevant code below.

Please suggest.

self.initialize = function () {

self.initializeTable();
self.oTable.fnAdjustColumnSizing();
new FixedColumns( self.oTable, {
"iLeftColumns": 2,
"iLeftWidth": 160
} );
self.loadAssets();
self.applyFormEvents();
self.oTable.fnFilter(currentTab, 15);
};

self.initializeTable = function () {
self.oTable = $('table.display').dataTable({
/*"sScrollY": "600px",*/
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse":true,
"borderCollapse":true,
"bLengthChange":false,
"bPaginate":true,
//"bJQueryUI":true,
"bLengthChange":true,
"bInfo":true,
"aoColumns":[
{"sTitle":"Asset ID", "mDataProp":"id.id", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Activity Done", "mDataProp":"historyActivity", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Asset Type", "mDataProp":"type.description", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Name", "mDataProp":"name", "bVisible":true, "sWidth":"10%"},
{"sTitle":"Account/Policy Number", "mDataProp":"accountNumber", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Value", "mDataProp":"amount.value", "bVisible":true, "sWidth":"10%"},
{"sTitle":"Has Joint Owner", "mDataProp":"hasJointOwner", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Has Lien", "mDataProp":"hasLien", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Joint Owner Party", "mDataProp":"jointOwnerType.description", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Current RealEstateValue", "mDataProp":"currentRealEstateValue.value", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Pending MortgageAmount", "mDataProp":"pendingMortgageAmount.value", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Address", "mDataProp":"fulladdress", "bVisible":true, "sWidth":"10%"},
{"sTitle":"Phone Number", "mDataProp":"phoneNumber", "bVisible":true, "sWidth":"5%"},
{"sTitle":"Updated By", "mDataProp":"username", "bVisible":true, "sWidth":"10%" },
{"sTitle":"Updated On", "mDataProp":"activityTimestamp", "bVisible":true, "sWidth":"10%"},
{"sTitle":"RelationInd", "mDataProp":"relationIndicator", "bVisible":false, "sWidth":"0%"}
]
});
};

self.applyFormEvents = function () {
$('.Patient').click(function () {
if(currentTab != "Patient") {
self.oTable.fnFilter('Patient', 15);
amplify.store("currentTab", "Patient");
}
currentTab = "Patient";
});
$('.Father').click(function () {
self.oTable.fnFilter('Father', 15);
amplify.store("currentTab", "Father");
});
$('.Mother').click(function () {
self.oTable.fnFilter('Mother', 15);
amplify.store("currentTab", "Mother");
});
$('.Spouse').click(function () {
if(currentTab != "Spouse") {
self.oTable.fnFilter('Spouse', 15);
amplify.store("currentTab", "Spouse");
}
currentTab = "Spouse" ;
});
};

allan

Please link to a test case showing the page: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

Allan