Fixed Header not repainting on Column Reorder
Fixed Header not repainting on Column Reorder
mantusingh
Posts: 8Questions: 0Answers: 0
hi Allan
I am trying to use Fixed Header with ColReorder on the datatable and would also use ColVis.
Great addons for the datatable, they really make the datatable effective and user friendly.
I am facing an issue in which the Fixed Header columns are not getting reordered when the
columns are dragged, even though in the background the columns do get shifted. On sorting any of the
columns the Fixed Header gets updated.
Is this normal behavior or is there a way to fix this or a place in ColReOrder where we could call the fnUpdate
api of the Fixed Header.
Also i have 5 divs with 5 FixedHeader's on the page which i use slideUp and slideDown api's of JQuery to give accordion effect.
The fixed header a) doesn't hide with the container div coz of z-index b) doesn't reposition itself whenever there is scroll added or removed.
How can i dynamically hide,show and reposition the FixedHeader ?
Also if i set default column widths for the datatable in IE 8 ,and hide any column using ColVis plugin, it shows empty white space for the removed column, but works fine in Chrome and Firefox. It works all right in IE 8 with default column widths removed.
Following is the configuration done
[code]
configParams = {
//"bSort": true,
"bAutoWidth": false,
"sDom": 'Rlfrtip',
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 100,
//"bSortClasses":false,
"bProcessing": true,
"oLanguage": {
"sSearch": "Filter:"
},
//"aaSorting": [[1, 'asc']],
"aoColumns": [
{ "sWidth": "16%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "6%", "bSortable": true, "bSearchable": true },
{ "sWidth": "6%", "bSortable": true, "bSearchable": true },
{ "sWidth": "6%", "bSortable": true, "bSearchable": true },
{ "sWidth": "10%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": false, "bSearchable": false }
]
};
var tbAllTrans = $('#tbAllTransactions').dataTable(configParams);
var fixedHdr = new FixedHeader(tbAllTrans);
[/code]
Any help is appreciated.
I am trying to use Fixed Header with ColReorder on the datatable and would also use ColVis.
Great addons for the datatable, they really make the datatable effective and user friendly.
I am facing an issue in which the Fixed Header columns are not getting reordered when the
columns are dragged, even though in the background the columns do get shifted. On sorting any of the
columns the Fixed Header gets updated.
Is this normal behavior or is there a way to fix this or a place in ColReOrder where we could call the fnUpdate
api of the Fixed Header.
Also i have 5 divs with 5 FixedHeader's on the page which i use slideUp and slideDown api's of JQuery to give accordion effect.
The fixed header a) doesn't hide with the container div coz of z-index b) doesn't reposition itself whenever there is scroll added or removed.
How can i dynamically hide,show and reposition the FixedHeader ?
Also if i set default column widths for the datatable in IE 8 ,and hide any column using ColVis plugin, it shows empty white space for the removed column, but works fine in Chrome and Firefox. It works all right in IE 8 with default column widths removed.
Following is the configuration done
[code]
configParams = {
//"bSort": true,
"bAutoWidth": false,
"sDom": 'Rlfrtip',
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 100,
//"bSortClasses":false,
"bProcessing": true,
"oLanguage": {
"sSearch": "Filter:"
},
//"aaSorting": [[1, 'asc']],
"aoColumns": [
{ "sWidth": "16%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "6%", "bSortable": true, "bSearchable": true },
{ "sWidth": "6%", "bSortable": true, "bSearchable": true },
{ "sWidth": "6%", "bSortable": true, "bSearchable": true },
{ "sWidth": "10%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": true, "bSearchable": true },
{ "sWidth": "4%", "bSortable": false, "bSearchable": false }
]
};
var tbAllTrans = $('#tbAllTransactions').dataTable(configParams);
var fixedHdr = new FixedHeader(tbAllTrans);
[/code]
Any help is appreciated.
This discussion has been closed.
Replies