Issue with FixedHeader in DataTables

ynsemratk

Hello.I am currently facing an issue with the DataTables library, specifically with the FixedHeader extension. I have included the necessary scripts and styles in my project, and although the FixedHeader is not throwing any errors in the console, it does not seem to be functioning as expected.
Here is a snippet of the code I am using:

<!-- DataTables CSS -->
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.dataTables.min.css" rel="stylesheet">

    <div class="card-datatable table-responsive overflow-hidden">
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
            <table id="example" class="table border-top nowrap" cellspacing="0" width="100%">
          </table>
      </div>
<!-- DataTables JS -->
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<!-- Bootstrap JS Bundle (includes Popper.js) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="~/Administrator/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<!-- DataTables Responsive JS -->
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>

<script>
    $(document).ready(function () {
        var table = $('#example').DataTable({
            fixedHeader: true,
            lengthChange: true,
            pagingType: "full_numbers", // Sayfalama türü
            order: [[0, 'asc']], // Başlangıçta sıralama
            columnDefs: [
                { targets: [3, 4], orderable: false }, // Belirli sütunlarda sıralama devre dışı
                {
                    targets: 0,
                    orderable: true,
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return row[0];
                        } else {
                            return $(data).find('.fw-medium').text();
                        }
                    }
                }
            ],
            buttons: [
                {
                    extend: 'collection',
                    text: '<i class="bx bx-export me-1"></i> Aktar',
                    className: 'btn-primary', // İsterseniz butonun stilini buradan ayarlayabilirsiniz
                    buttons: [
                        {
                            text: '<i class="bx bx-printer me-2"></i> Yazdır',
                            extend: 'print'

                        },
                        {
                            text: '<i class="fa-regular fa-file-excel me-2"></i> Excel',
                            extend: 'excel'
                        },
                        {
                            text: '<i class="bx bxs-file-pdf me-2"></i> PDF',
                            extend: 'pdf'
                        },
                        {
                            text: '<i class="bx bx-copy me-2"></i> Kopyala',
                            extend: 'copy'
                        }
                    ]
                }
            ],
            responsive: {
                details: {
                    display: DataTable.Responsive.display.modal({
                        header: function (row) {
                            var data = row.data();
                            return 'Details for ' + data[1];
                        },
                    }),
                    renderer: DataTable.Responsive.renderer.tableAll({
                        tableClass: 'table',
                    }),
                },
            },
            language: {
                "buttons": {
                    "copy": "Kopyala",
                    "excel": "Excel",
                    "pdf": "PDF",
                    "print": "Yazdır",
                    "colvis": "Sütun Görünürlüğü",
                    "copyTitle": 'Panoya Kopyala',
                    "copySuccess": {
                        "_": "%d Satır Kopyalandı",
                        "1": "1 Satır Kopyalandı"
                    }
                },
            },
            initComplete: function () {
                // Arama kutusuna placeholder eklemek
                $('.dataTables_filter input').attr('placeholder', 'Arama Yapınız..');
            }
        });
        table.buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');
        $('#example_wrapper .row:first').addClass('mx-2 mt-3 mb-3');
        // İlk .row içindeki .col-sm-12.col-md-6 olan kısmı col-md-2 olarak değiştirme
        $('#example_wrapper .row:first .col-sm-12.col-md-6:first').removeClass('col-sm-12 col-md-6').addClass('col-md-2');
        // İlk .row içindeki ikinci .col-sm-12.col-md-6 olan kısmı col-md-10 olarak değiştirme
        $('#example_wrapper .row:first .col-sm-12.col-md-6:last').removeClass('col-sm-12 col-md-6').addClass('col-md-10');
        $('#example_wrapper .row.mx-2 .col-md-2:first-child').prepend('<div class="me-3"></div>');
        $('#example_wrapper .row.mx-2 .col-md-2:first-child .me-3').prepend($('#example_length'));
        $('#example_wrapper .row.mx-2 .col-md-10').prepend('<div class="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-3 mb-md-0"></div>');
        $('#example_wrapper .row.mx-2 .col-md-10 .dt-action-buttons').prepend($('#example_filter'));
        $('#example_wrapper .row.mx-2 .col-md-10 .dt-action-buttons').append($('.dt-buttons.btn-group.flex-wrap'));
        var addButtonDiv = $('<div class="dt-button add-new btn btn-primary" tabindex="0" aria-controls="DataTables_Table_0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasAddUser">' +
            '<span>' +
            '<i class="bx bx-plus me-0 me-sm-1"></i>' +
            '<span class="d-none d-sm-inline-block">Personel Ekle</span>' +
            '</span>' +
            '</div>');
        $('#example_wrapper .row.mx-2 .col-md-10 .dt-action-buttons').append(addButtonDiv);
        $('#DataTables_Table_0_wrapper .row:last').addClass('mx-2 mt-1 mb-3');
        var isFirstPage = table.page() === 0;
        var isLastPage = table.page() === table.page.info().pages - 1;
        if (isFirstPage) {
            $(".paginate_button.previous").hide();
        }
        if (isLastPage) {
            $(".paginate_button.next").hide();
        }
        table.on('draw', function () {
            isFirstPage = table.page() === 0;
            isLastPage = table.page() === table.page.info().pages - 1;

            if (isFirstPage) {
                $(".paginate_button.previous").hide();
                $('.paginate_button.first:not(.active)').hide();
            } else {
                $(".paginate_button.previous").show();
            }

            if (isLastPage) {
                $(".paginate_button.next").hide();
                $('.paginate_button.last:not(.active)').hide();
            } else {
                $(".paginate_button.next").show();
            }
        });
    });
</script>

Despite having included all the necessary dependencies and scripts, the FixedHeader does not appear to be working. If anyone has experience with this issue and could offer guidance on a potential solution, I would greatly appreciate it.
Thank you for your time and assistance.
Best regards.

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

allan

Hi,

You do appear to have what is needed that. Since I can see it working here, I'll need a link to a test case showing the issue to be able to debug and help resolve the problem. If you could provide that link, that would be very welcome.

Allan