DataTables Pagination Issue: Header hides with scrollX Option

Noodles12

I'm using DataTables, and everything works well, but I've encountered an issue when clicking on pagination: the table header hides, leaving only the table body visible. After some debugging, I discovered that the scrollX: true option is causing this problem. I attempted to remove the scrollX: true option and instead wrapped the parent element in a div with overflow enabled. However, this change resulted in scrollbar appearing below the pagination numbers, separate from the table itself. I am unable to reproduce this on datatables.live.net, but I am hoping this is a common problem you may have encountered.

<script>
$(document).ready(function() {
    // Initialize DataTables for all elements with the class 'example-table'
    var table = $('.example-table').DataTable({
         paging: true,
        
          fixedHeader: true,
          "scrollX": true, 
        searching: true,
        info: true,
        ordering: true,
        order: [],
        "scrollCollapse": true,
        dom: 'ifrtBp', // Add the buttons control element
        buttons: [
            {
                extend: 'excelHtml5',
                text: 'Export to Excel',
                titleAttr: 'Export as Excel'
             }
        ]
    });



    // Add event listener for print
    window.onbeforeprint = function() {
        // Disable horizontal scrolling and paging temporarily before printing
        table
            .columns.adjust()
            .draw(false); // Redraw table without changing page
        table.page.len(-1).draw(); // Show all entries

        // Disable overflow and scrolling for both header and body
        $('.dataTables_scrollBody').css('overflow', 'visible'); 
        $('.dataTables_scrollHead').css('overflow', 'visible');
    };

    window.onafterprint = function() {
        // Re-enable horizontal scrolling and restore paging after printing
        table.page.len(10).draw();

        // Restore overflow and scrolling for both header and body
        $('.dataTables_scrollBody').css('overflow', 'auto'); 
        $('.dataTables_scrollHead').css('overflow', 'auto');
    };
});
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

This kind of problem will be hard to debug without seeing it fail. I appreciate you can't reproduce on live, but can you link to your page that demonstrates the issue.

Colin

kthorngren

Make sure you have all the correct style integration includes for the style framework being used. Use the Download Builder for this.

Kevin

Noodles12

This is the closest I could reproduce. Scroll to the middle of the table and hit pagination. It hides top rows and header.
https://live.datatables.net/laneweku/1/edit

kthorngren

I'm not able to recreate the issue. I scrolled so that column5 was centered in the container and moved through the pages. All rows including the header stayed visible. I'm using Chrome on a Mac. Maybe its a browser issue? What OS and browser are you using and have you tried with another browser?

You have FixedHeader enabled but didn't load the library. Maybe that is part of the issue.

Can you provide more specific steps to recreate the issue with the test case?

Kevin

Noodles12

I removed fixed header, and I still see the issue. Sorry, I was not clear earlier. Scroll the **page **to the middle of the table<tbody> for example upto Arkansas row and then hit page2, then page 1. See how it behaves.

https://live.datatables.net/laneweku/1/edit

allan

Try using https://nightly.datatables.net/js/dataTables.js?2024-10-25 as the source JS. I suspect you are just getting an old cached version of the nightly.

https://live.datatables.net/laneweku/2/edit

Allan