Fixed Columns problem with added header rows
Fixed Columns problem with added header rows
neginbasiri
Posts: 10Questions: 4Answers: 0
Hi everyone,
I need to implement 3 rows header with fixed columns. So I appended the header rows to header on dataSrc callback. Below is how I added rows to header.
function createHeaders(headeData){
//.... creating firstHeaderRow
//.... creating secondHeaderRow
$('thead tr:first-child').before(firstHeaderRow);
$('thead tr:last-child').after(secondHeaderRow);
}
My table configured like below:
$('#tableElement').DataTable({
fixedColumns : {
leftColumn: 5,
rightColumn: 2
},
ajax: {
dataSrc: function(data){
createHeaders(data.headerData);
}
}
});
The problem is in this case firstHeaderRow and secondHeaderRow is not showing for fixedColumns. (It's showing for non-fixed columns correctly)
Based on documentation I think I need to call fnRedrawLayout()
So I added below lines at the bottom of createHeaders function
var table = $('#tableElement').dataTable();
var fc = new $.fn.dataTable.FixedColumns( table, {
leftColumn: 5,
rightColumn: 2
});
fc.fnRedrawLayout();
However I am getting this error on FixedColumn.min
Uncaught TypeError: Cannot read property 'style' of null on below line.
a.wrapper.style.height=e+"px";0<this.s.iLeftColumns&&(a.left.wrapper.style.width=g+"px",a.left.wrapper.style.height="1px",a.left.body.style.height=
Any help is much appreciated to get this working.
Regards,
Neginn
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Could you link to a test page showing the issue please? Are you have three
trelements in yourthead? That should work automatically in FixedColumns.Allan
Yes I have 3 tr in thead element. When I put break point on the last line of _fnConstruct for FixedColumn, headers are showing as expected when I press play button to continue the headers are hidden.
Are you able to give me a link to the page so I can debug it please.
edit I've just seen your PM - thanks for the link there.
Allan
Here is showing the problem.
http://live.datatables.net/habokasi/1/edit
Please note the API call might be slow and you have to wait a little bit.
Thanks for the link. This ultimately is due to a limitation in DataTables in that you cannot construct complex headers using its initialisation options.
Instead, why you must do is create the header using jQuery / DOM methods before the DataTable is initialised. DataTables and FixedColumns should just work automatically once the header has been setup.
Allan
Thank you so much Allan for your reply.
Negin
Dear Allan, How can I customized an grid column when use the dataTables? For example,in the last col ,which value is set to boolean ,and then I want to use the plugin like
Switchery -- http://abpetkov.github.io/switchery/ I would refer to your reply.
@Lucifer_UD - Could you clarify how your question relates to the original question in this thread?
Please post new questions in a new thread and link to a test case showing what you have tried so far.
Allan
OK,I will post a new question and show issues specified！
Hi People,
I added the headers before initializing the table. Below is the link
http://live.datatables.net/habokasi/4/edit
i have 2 issues:
The first row header expected to show 2015 and 2016 above Dec and Jan respectively (You can check the console.log to see headers html) . However when data is recieved from API the header text for the first row is changed. How to prevent that?
FixedColumn doesn't seem to be working at all