FixedColumns.js with Datatable

rexallwyn

In our project we are using fixed column.js with datatable so that by specifying the row and column range, the value in the excel for that range will be imported to the datatable.


We are using below plugins.
• Jquery – (jquery.js) v1.6.1
• Datatable – (jquery.dataTables.js ) v1.9.4
• FixedColumns.js – 2.0.3 (to Freeze first two columns in place on a scrolling grid)

Scenario :
• Here first two column will always fixed using Fixed column plugin and second freeze column contains dropdowns.
• No of columns and no of rows will changed dynamically.
• When no of rows are more than around 100 then freeze column is not in sync with other columns. Its overlying.
• When no of columns are more than around 20 then header part of columns is not in sync with the column data and this header part is also containing drop down.

Below is the code snippet for converting HTML table into data table with freeze column functionality.

var oTable = $('#excelData1').dataTable( {
"bInfo" : false,
"bFilter" : false,
"bProcessing" : false,
"bServerSide" : false,
"bPaginate" : false,
"bSort" : false,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bAutoWidth" : true,
"bScrollCollapse": true
} );
new FixedColumns( oTable, {
"iLeftColumns": 2,
"iLeftWidth": 300
} );
Here we are using sScrollXInner because we are building table dynamically and we are not sure about how many columns or the size of each one.

We are manually updating the value for a datable attribute sScrollXInner using below code snippet.

if (maxColumnSize > 0) {
var oTable = $('#excelData1').dataTable();
var updateWidth = maxColumnSize * 20 + "%";
if(maxColumnSize < 5) {
updateWidth = maxColumnSize * 25 + "%";
}
if (oTable) {
oTable.UpdateScrolX(updateWidth);
oTable.fnAdjustColumnSizing();
oTable.fnDraw();
}
}
Please let me know if you need more information. We need a solution soon so kindly help us.