Fixed Columns problem with added header rows

neginbasiri

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

allan

Could you link to a test page showing the issue please? Are you have three tr elements in your thead? That should work automatically in FixedColumns.

Allan

neginbasiri

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.

allan

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

neginbasiri

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.

allan

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

neginbasiri

Thank you so much Allan for your reply.
Negin

Lucifer_UD

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.

allan

@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

Lucifer_UD

OK,I will post a new question and show issues specified！

neginbasiri

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:

1. 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?

2. FixedColumn doesn't seem to be working at all