destroying and recreating datatables on window.resize does not show header again

DanielRuf

See https://codepen.io/DanielRuf/pen/rqmaRd

Try to resize the browser windows to < 768 and >= 768 px width and the table headers are gone.

DanielRuf

It seems the original head is not moved to its original place and there are still datataTable classes and markup left.

colin

Hi @DanielRuf ,

Thanks for the demo... Could you do it so that's it non-minimised, please - it makes it very hard to understand what the code is doing...

Cheers,

Colin

DanielRuf

I do not fully understand what you mean. In the js tab there is the datatables + fixedColumn sourcecode + at the very end my code which is just the following:

var table = $('.products-list-table').dataTable( {
                fixedColumns: {
                    leftColumns: 0,
                    rightColumns: 1,
                    heightMatch: 'none'
                },
                scrollX:   true,
                            searching: false,
                            ordering:  false,
                            paging:    false,
                            destroy:   true
            } );

function destroyIt(){
  new $.fn.dataTable.Api('.products-list-table').destroy();
}



function recreateIt(){
  $('.products-list-table').dataTable( {
                fixedColumns: {
                    leftColumns: 0,
                    rightColumns: 1,
                    heightMatch: 'none'
                },
                scrollX:   true,
                            searching: false,
                            ordering:  false,
                            paging:    false,
                            destroy:   true
            } );
}

$(window).on('resize orientationchange', function () {
            if(window.matchMedia('(max-width: 767px)').matches){
                if($.fn.DataTable.isDataTable( '.products-list-table' )){
                    destroyIt();
                }
            } else {
                if(!$.fn.DataTable.isDataTable( '.products-list-table' )){
                    recreateIt();
                }
            }
        });

DanielRuf

Try to resize the browser window from big to very small for two times and then back to big and you'll see that the headers are missing now / not shown.

colin

Yep, I see what you mean, I didn't spot the code buried at the bottom.

DAustin

All I can see is the header row getting an inline css set on its height to 0px

Hard to pick apart the markup with all the codepen stuff going on but adding

.dataTables_sizing{
    height: 1em !important;
}

does bring them back but with a duplicate row. Weird.

DanielRuf

All I can see is the header row getting an inline css set on its height to 0px

Yes because datatables hides the orginal one to clone (and split) it for the generated table.

Displaying / showing this one is not the solution.

For me it seems like destroy method does not cleanup everything and many things are not reverted like the headers.

colin

We're looking into it now, there's definitely something wobbly there, will report back once we've worked out more.

allan

This is a bit of a cracker. What is happening is that DataTables uses a setTimeout as a throttle on window resize so it doesn't just happen the CPU with redrawing the table. The issue with that is that the code is running async to the table's creation and destroy.

This can and should be fixed in DataTables core, although I'm not immediately certain what the correct fix is since the timer isn't exposed to the host code. I've logged a bug to look into that.

In the mean time there are a few alternative options:

1. Use a setTimeout in your own code: https://codepen.io/anon/pen/BqdaQw?editors=1010
2. Disable autoWidth: https://codepen.io/anon/pen/ePEYeo
3. Do the destroy on column-sizing. I've not demo'ed that as I think it would be really messy since you are listening for an event that you are about to then destroy the source of.

Allan