Using Fixed header , scrollY, responsive at the same time but fixed header not working ?
Using Fixed header , scrollY, responsive at the same time but fixed header not working ?
I am using Fixed header , scrollY, responsive at the same time, but fixed header is not working. Code is as following.I know scrollY and fixedheader are not compatible. How can I solve this problem PLEASE HELP
var table = $('#table_id').DataTable({
retrieve: true,
destroy: true,
responsive: true,
paging: false,
scrollY: '68vh',
"order": [],
"oLanguage": {
"sEmptyTable": "No Data available for this selection"
},
columnDefs: [{
type: 'date',
targets: [4]
}, {
type: 'date',
targets: [5]
}, ],
dom: 'Bfrtip',
buttons: [{
extend: 'csvHtml5',
text: '',
titleAttr: 'Download CSV',
extension: '.csv',
filename: 'Time Tracking Report - with Session details',
exportOptions: {
modifier: {
page: 'current'
}
}
}, {
extend: 'pdfHtml5',
text: '',
titleAttr: 'Download PDF',
alignment: 'center',
bProcessing: true,
footer: true,
title: 'Time Tracking Report - with Session details',
orientation: 'landscape',
pageSize: 'LEGAL',
message: 'Start Date:: ' + hidden_startdate_avail + ' - End Date:: ' + hidden_enddate_avail,
pageSize: 'A4',
exportOptions: {
modifier: {
page: 'current'
}
}
}],
"footerCallback": function(row, data, start, end, display) {
var api = this.api(),
data;
// Remove the formatting to get integer data for summation
var intVal = function(i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column(6)
.data()
.reduce(function(first, second) {
var first = intVal(first) + intVal(second);
var first = first.toFixed(2);
return first;
}, 0);
// Update footer
$(api.column(6).footer()).html(+total);
}
});
if (result == undefined) {
console.log(" ");
} else {
new $.fn.dataTable.FixedHeader(table);
}
This discussion has been closed.