Fixed behavior of datatables fixedHeader on subsequent ajax calls.

This commit is contained in:
Jan Böhmer 2023-02-12 17:46:09 +01:00
parent c8bfe7f6d4
commit f22d65cd24

View file

@ -81,13 +81,12 @@ export default class extends Controller {
//Add url info, as the one available in the history is not enough, as Turbo may have not changed it yet
settings.url = this.element.dataset.dtUrl;
let options = {
colReorder: true,
responsive: true,
fixedHeader: {
header: $(window).width() >= 768, //Only enable fixedHeaders on devices with big screen. Fixes scrolling issues on smartphones.
headerOffset: $("#navbar").height()
headerOffset: $("#navbar").outerHeight()
},
buttons: [{
"extend": 'colvis',
@ -133,6 +132,11 @@ export default class extends Controller {
dt.on('select.dt deselect.dt', this._onSelectionChange.bind(this));
});
promise.then((dt) => {
//Recalculate the fixed header offset, as the navbar should be rendered now
dt.fixedHeader.headerOffset($("#navbar").outerHeight());
});
//Allow to further configure the datatable
promise.then(this._afterLoaded.bind(this));
@ -140,6 +144,12 @@ export default class extends Controller {
console.debug('Datatables inited.');
}
disconnect() {
//Destroy the datatable element
this._dt.destroy();
console.debug("Datatables destroyed.");
}
_rowCallback(row, data, index) {
//Set the row class based on the optional $$rowClass column data, can be used to color the rows