Broken page and duplicated headers

ssdev

I use buttons in a table for hiding empty cells in a target row. It often works well. But sometimes it breaks the page and the table. Then I have 2 headers. And I can't go to the top of the page, and I can't see the button for "Click to show all record". I scroll to the top but I see only the top of the table. Only manual refresh for the page can help me.

The code for init:

self.gridtable = $('#my_grid').DataTable( {
            lengthMenu: [-1],
            dom: "Bfti",
            data: self.gridData,
            order: [],
            scrollX: true,
            scrollCollapse: true,
            stateSave: true,
            colReorder: true,
            fixedHeader: true,
            "scrollY": 500,
            "scrollX": true,
            "columns": columns,
            buttons: {
......

The code for hiding:

......
self.gridtable.columns(emptyColumnArray).visible(false, false);
self.gridtable.columns.adjust().draw(false);
......

ssdev

up

HPB

https://datatables.net/extensions/fixedheader/

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

ssdev

Oh, I see... Thanks a lot! Could you give me any advice? Maybe some place in the code of DataTables where I can try to fix it behavior?

allan

The advice is to not use both FixedColumns and FixedHeader together. They are simply not compatible.

If you want to go ahead and change the code so they do work together that would be awesome - I suspect its a fair amount of work which is why I've not attempted it yet myself. You'd need to have an understanding of how FixedHeader works as that is where I think the change would be needed, and also how FixedColumns does its layout.

Allan

ssdev

Thank you!

ssdev

I still have hope... maybe is there another way to achieve the same effect using other datatables features?

allan

Nope - sorry. I would have said if there was.