FixedHeader with fnHeaderCallback, FixedHeader work but fnHeaderCallback not work
FixedHeader with fnHeaderCallback, FixedHeader work but fnHeaderCallback not work
eewindfly
Posts: 2Questions: 0Answers: 0
In my case, I use fnHeaderCallback to dynamically change the innerHtml of headers.
It works well before I add the FixedHeader, but when "new FixedHeader" was added, the innerHtml of headers won't change dynamically which depended on my other's input box.
And, FixedHeader works very well.
It's there any ideas that I misused the combination between fnHeaderCallback and FixedHeader?
My example code is below:
[code]
"fnInitComplete": function(oSettings, json) {
fixedheader = new $.fn.dataTable.FixedHeader( facility_booking_available_time_table );
},
"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
nHead.getElementsByTagName('th')[0].innerHTML = "";
var query_date = $("#query_facility_booking_date").val();
if(!query_date) {
query_date = moment().add('days', 2).format('YYYY-MM-DD');
}
nHead.getElementsByTagName('th')[1].innerHTML = moment(query_date).add('days', -2).format("LL");
nHead.getElementsByTagName('th')[2].innerHTML = moment(query_date).add('days', -1).format("LL");
nHead.getElementsByTagName('th')[3].innerHTML = moment(query_date).format("LL");
nHead.getElementsByTagName('th')[4].innerHTML = moment(query_date).add('days', 1).format("LL");
nHead.getElementsByTagName('th')[5].innerHTML = moment(query_date).add('days', 2).format("LL");
},
[/code]
Thanks a lot!!
By the way, I had ever added fixedheader.fnUpdate(), but it didn't work at all.
It works well before I add the FixedHeader, but when "new FixedHeader" was added, the innerHtml of headers won't change dynamically which depended on my other's input box.
And, FixedHeader works very well.
It's there any ideas that I misused the combination between fnHeaderCallback and FixedHeader?
My example code is below:
[code]
"fnInitComplete": function(oSettings, json) {
fixedheader = new $.fn.dataTable.FixedHeader( facility_booking_available_time_table );
},
"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {
nHead.getElementsByTagName('th')[0].innerHTML = "";
var query_date = $("#query_facility_booking_date").val();
if(!query_date) {
query_date = moment().add('days', 2).format('YYYY-MM-DD');
}
nHead.getElementsByTagName('th')[1].innerHTML = moment(query_date).add('days', -2).format("LL");
nHead.getElementsByTagName('th')[2].innerHTML = moment(query_date).add('days', -1).format("LL");
nHead.getElementsByTagName('th')[3].innerHTML = moment(query_date).format("LL");
nHead.getElementsByTagName('th')[4].innerHTML = moment(query_date).add('days', 1).format("LL");
nHead.getElementsByTagName('th')[5].innerHTML = moment(query_date).add('days', 2).format("LL");
},
[/code]
Thanks a lot!!
By the way, I had ever added fixedheader.fnUpdate(), but it didn't work at all.
This discussion has been closed.
Replies
Can you link to a test case showing the problem please.
Allan
I am sorry that I couldn't provide a test case link showing the problem.
But, I found if I directly call the inside functions of fnUpdate, it works!
[code]
if(fixedheader)
{
//for temporary fixed!!
fixedheader._fnUpdateClones(true);
fixedheader._fnUpdatePositions();
}
[/code]
I thought the key is the extra parameter of _fnUpdateClones(), "true".
I saw the source code says that it is a little bit of a hack which I still don't know why I need add the parameter.
I can't call fnUpdate with the parameter now, so I just copied the inside codes of the function.
But this temporary solution seems not a good idea.
Thank you!!