problem with column resize when using y scroll

arun123

Hai , Im having some problem with column resizing when using it with infinite y scroll , plz check the link http://live.datatables.net/amegeb/18/edit

manishainvitra

Hi Allan,
I have used datatables in my Code. There are three sections on the screen for which I have applied datatables and fixed Column feature. The column numbers excluding the fixed columns are varying for each users inside the Datatable. The columns inside the scroller(Horizontal scroll bar) are 2,3,4,5 ..... 20, 25 any number.

When I set sScrollXInner width in % , the columns inside the scroller get misaligned. But when I set it in pixel (i.e. 3000px) it displays the columns with proper alignment for higher number of columns ( > 8). For less number of columns it shows a big gap between columns.

How or what width can I set for sScrollXInner parameter so that the Datatable will display with proper alignment. Below is my initialisation code for datatables.

First Datatable:
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "3000",
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false,
"bAutoWidth": false
} );
var oTables = new FixedColumns( oTable, {
"iLeftColumns": 2,
"iLeftWidth": 350

}
);

setTimeout(function(){oTables.fnRedrawLayout();}, 1000) ;
} );

-------------------------------------------------------------------
Second datatable:

$(document).ready( function () {
var oTablerf = $('#examplerf').dataTable( {
"sScrollY": "",
"sScrollX": "100%",
"sScrollXInner": "3000",
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false
} );
var oTablerfs = new FixedColumns( oTablerf, {
"iLeftColumns": 2,
"iLeftWidth": 350

}
);
//$('#example').width( 1840 );
setTimeout(function(){oTablerfs.fnRedrawLayout();}, 1000) ;

-----------------------------------------------------------------------
Third Datatable:


$(document).ready( function () {
var oTablescrfcal = $('#examplescrfcal').dataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "270%",
"bScrollCollapse": true,
"bPaginate": false,
"bSort": false,
"bSearchable": false,
"bAutoWidth": false
} );
var oTablescrfcals = new FixedColumns( oTablescrfcal, {
"iLeftColumns": 2,
"iLeftWidth": 210
}
);
setTimeout(function(){oTablescrfcals.fnRedrawLayout();}, 1000) ;

} );