Second row header for fixed column in datatable

Question

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.

What version of datatables and fixed columns are you using? Maybe try calling columns.adjust() before redrawing, but after adding header rows? datatables.net/reference/api/columns.adjust() — chris van hooser
– chris van hooser, Commented Jan 6, 2016 at 0:54
DataTable.version = "1.10.10" and FixedColumns.version = "3.2.0" — Negin Basiri
– Negin Basiri, Commented Jan 6, 2016 at 1:00
I added columns.adjust() before calling fc.fnRedrawLayout(); but didn't work. Still I'm getting the error for style. I added headers row not columns not sure why you suggested to adjust columns. — Negin Basiri
– Negin Basiri, Commented Jan 6, 2016 at 1:11
Are the header rows you add not separated by columns? I generally will construct my complex headers before i initialize the datatable, so I havn't ever tried to add them afterwards. Have you tried calling: fixedColumns().relayout(), rows().recalcHeight(), or fixedColumns().update()? from this page: datatables.net/reference/api/#fixedcolumns — chris van hooser
– chris van hooser, Commented Jan 6, 2016 at 1:16
@chrisvanhooser Thank you so much. You made my day table.columns.adjust().fixedColumns().relayout(); worked! — Negin Basiri
– Negin Basiri, Commented Jan 6, 2016 at 1:25

chris van hooser · Accepted Answer · 2016-01-06 01:37:33Z

1

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.

edited Jan 6, 2016 at 1:37

answered Jan 6, 2016 at 1:31

chris van hooser

3883 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Second row header for fixed column in datatable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related