Scroll positions not saved when using fixed columns
Scroll positions not saved when using fixed columns
Link to test case: nope
Debugger code (debug.datatables.net): "an error occurred, sorry"
Error messages shown: none
Description of problem:
Hello there, it seems that in all our tables that are using fixed columns, saving of the scroll positions is broken.
On pages with fixed columns:
$.fn.dataTable.tables( { visible: true, api: true }).scroller.page().start
returns 0
On pages without fixed columns:
$.fn.dataTable.tables( { visible: true, api: true }).scroller.page().start
returns the actual vertical scroll position, e.g. 52
I tried finding out how and where the scroll positions are being stored after a submit, so far to no avail.
Unfortunately the debugger runs into an error on upload, so all I can really do is provide the configurations:
On the jsp (yes, still using those...):
jQuery(document).ready(function() {
var oTable = jQuery("#DataTable");
initializeTaxFormDataTable(oTable, {fixedColumns: {leftColumns: 5}, calcHeight: true}, {showHeader: false, hideHeader: false});
} );
jQuery(window).on('resize', function(){
setTimeout(function() { $.fn.dataTable.tables( { visible: false, api: true } ).columns.adjust().fixedColumns().relayout(); }, 250);
});
In the customized datatables.js:
function initializeTaxFormDataTable(oTable, options, buttons, isPaging) {
/// ...
var colCount = getDataTableColumnCount(oTable);
var scrollCollapse = options.scrollCollapse;
var calcHeight = options.calcHeight;
var showHeader = buttons.showHeader;
var hideHeader = buttons.hideHeader;
var fixColumns = buttons.fixColumns;
var noOfFixedColumns = buttons.noOfFixedColumns;
useJqueryUi = false;
var defaults = {
"scrollY" : "75vh",
"scrollX" : true,
"jQueryUI" : isNullOrEmpty(useJqueryUi) ? true : useJqueryUi,
"scrollCollapse" : scrollCollapse,
"lengthChange" : false,
"searching" : true,
"ordering" : false,
"info" : false,
"autoWidth" : false,
"language" : getDataTableLang(),
"stateSave" : true,
"pagingType" : "full",
"dom" : 'T<"H"Bfr>tS<"F">',
"initComplete" : function(settings, json) {
jQuery("#load-overlay").hide();
jQuery("#printDiv").hide();
jQuery("#excelDiv").hide();
},
"stateSaveParams" : function(settings, data) {
var api = new $.fn.dataTable.Api(settings);
if (api.buttons('colvisRestore')) {
api.buttons('colvisRestore').trigger();
}
},
"buttons" : [],
"scroller" : {
displayBuffer : 1000
}
};
var settings = jQuery.extend({}, defaults, options);
settings = jQuery.extend({}, settings, getDataTableLang());
var datatable = oTable.DataTable(settings);
var buttonPos = 0;
if (showHeader) {
$.fn.dataTable.ext.buttons.showHeader = createButtonShowHeader();
datatable.button().add(buttonPos, {
extend : 'showHeader',
className : 'showHeaderButton'
})
buttonPos++;
}
if (hideHeader) {
$.fn.dataTable.ext.buttons.hideHeader = createButtonHideHeader();
datatable.button().add(buttonPos, {
extend : 'hideHeader',
className : 'hideHeaderButton'
})
buttonPos++;
}
if (fixColumns) {
$.fn.dataTable.ext.buttons.fixColumns = createButtonFixColumns(noOfFixedColumns);
datatable.button().add(buttonPos, {
extend : 'fixColumns',
className : 'buttons-fix-columns'
})
}
relocateDataTableButtons(isPaging);
oTable.DataTable().columns.adjust();
setTimeout(function () {
$.fn.dataTable.tables({visible: false, api: true}).columns.adjust().fixedColumns().relayout();
}, 250);
}
We are currently using DataTables 1.10.18
Thanks in advance
Answers
Hi,
First thing to do would be to update your DataTables install. 1.10.18 is quite old now - 1.12.1 is the current release. Note that we don't attempt to store the horizontal scroll position at this time.
Allan