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

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

DanielRufDanielRuf Posts: 10Questions: 2Answers: 0

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.

Replies

  • DanielRufDanielRuf Posts: 10Questions: 2Answers: 0
    edited October 2018

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • DanielRufDanielRuf Posts: 10Questions: 2Answers: 0
    edited October 2018

    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();
                    }
                }
            });
    
  • DanielRufDanielRuf Posts: 10Questions: 2Answers: 0
    edited October 2018

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • DAustinDAustin Posts: 16Questions: 0Answers: 1

    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.

  • DanielRufDanielRuf Posts: 10Questions: 2Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.