Negin Basiri Negin Basiri - 4 years ago 291
Javascript Question

Second row header for fixed column in datatable

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.

Answer Source

The solution would be to call columns.adjust() and fixedColumns().relayout().

This allows datatables to know about the header rows you added after it was constructed.

The fixed columns extension also need to be updated of all changes, because it basically created a new table to lay on top of the actual table.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download