I am currently facing an issue with my datatables.net datatable. While all the columns and header are displaying properly, I am unable to position the header on top of the table. Instead, it appears on the side. Here's a visual representation:
Current layout:
header [datatable]
Desired layout:
header
[datatable]
Below is the code snippet I am working with:
var FORCE_SHOW = false,
TABLE_HEIGHT = '207',
DEFAULT_TABLE_WIDTH = 650,
SCROLL_BAR_WIDTH = 20;
var logTbl = '<table id="logTbl" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;"></table>';
$logTab.html(logTbl);
$('#logTbl').dataTable({
sDom: '<"header"i>t<"Footer">',
bFilter: false,
bInfo: true,
bPaginate: false,
sScrollY : TABLE_HEIGHT,
oLanguage : {
sLengthMenu: "_MENU_ records per page",
sInfo: "Logs"
},
bSort : false,
sScrollX : '100%',
sScrollXInner : '800px',
bScrollCollapse : true,
bDestroy : true,
aaData : data,
aoColumns: [
//columns
]
});
In another HTML file, I have added the table where the datatable should be placed. All the required HTML elements are included in this JavaScript file.
If anyone has suggestions on how to resolve this header positioning issue, I would greatly appreciate it. Thank you!