Hide thead when no data

JACinDE

As in the subject, I would like to only display the thead when there is data in the table. This works on first run, but fails on subsequent runs. Debug.datables.net was https://debug.datatables.net/ikoqes, but doesn't work for me. You can see some of the things I've tried in commented code. My code is:

    let table = $('#results-table').DataTable({
        ajax: {
            type: 'POST',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: function (d) {
                return $.extend({}, d, {
                    cycleId: $('#cycle-select').val(),
                    grade: $('#grade-select').val(),
                    interventionGroupId: $('#intervention-group-select').val(),
                    planStatusId: $('#plan-status-select').val(),
                    subjectId: $('#subject-select').val(),
                    tier: $('#tier-select').val()
                })
            },
            dataSrc: '',
            error: (result => {
                if (result.status === 400) {
                    window.location.href = window.resolveUrl("~/Index");
                }
                $("#server-error").html(result.responseJSON);
                $('#results-table_processing').hide();
            })
        },
        columns: [
            {
                className: 'text-nowrap',
                data: 'FullName',
                title: 'Name',
                render: ((data, _, row) => {
                    return '<a href="../../Student/StudentDetail/' + row.StudentID + '" title="View Student Detail">' + data + '</a>';
                }),
            },
            { orderable: false, data: 'StudentID', title: 'Student ID', className: 'text-center' },
            { orderData: [2, 0], data: 'Grade', title: 'Grade', className: 'text-center' },
            { orderData: [3, 0], data: 'HomeRoom', title: 'Homeroom', className: 'text-center' },
            { orderable: [4, 0], data: 'TierDescription', title: 'Tier', className: 'text-center' },
            {
                orderData: [5, 0],
                data: 'PlanDate',
                title: 'Plan Date',
                className: 'text-nowrap',
                render: ((data, type, row) => {
                    if (type === 'display') {
                        return '<a href="../../Groups/GroupDetails/' + row.InterventionGroupID + '" title="Click to view group">' + moment(data).format('MM/DD/YYYY') + '</a>';
                    }
                    return data;
                }),
            },
            {
                orderData: [6, 0],
                data: 'GroupName',
                title: 'Group Name',
                className: 'text-nowrap',
                render: ((data, type, row) => {
                    if (type === 'display') {
                        return '<a href="../../Groups/GroupDetails/' + row.InterventionGroupID + '" title="Click to view group">' + data + '</a>';
                    }
                    return data;
                }),
            },
            {
                orderable: false,
                data: 'Programs',
                title: 'Programs',
                render: ((data, type, row) => {
                    if (type === 'display') {
                        var badges = '';
                        if (row.IsPlan504) {
                            if (access504) {
                                badges += '<a class="student-badge badge badge-pill badge-504Plan px-2 mb-2 mr-2 text-decoration-none" href="/itrackerteams/StudentDetails?StudentID='
                                    + row.StudentID + '" target="_blank" title="504 Plan (' + row.DisabilityCode + ' - ' + row.DisabilityCodeDescription + ')">504</a>';
                            } else {
                                badges += '<span class="student-badge badge badge-pill badge-504Plan px-2 mb-2 mr-2 text-decoration-none cursor-default" title="504 Plan ('
                                    + row.DisabilityCode + ' - ' + row.DisabilityCodeDescription + ')">504</span>';
                            }
                        }
                        if (row.IsELL) {
                            if (ellAccess) {
                                badges += '<a class="student-badge badge badge-pill badge-EL mb-2 mr-2 text-decoration-none" href="/EL/Reports/rptStudentDetail?StudentID='
                                    + row.StudentId + '" target="_blank" title="English Learner (' + row.ELLInstructionType + ' - ' + row.ELLProgramType + ')">EL</a>';
                            } else {
                                badges += '<span class="student-badge badge badge-pill badge-EL mb-2 mr-2 text-decoration-none cursor-default" title="English Learner ('
                                + row.ELLInstructionType + ' - ' + row.ELLProgramType + ')">EL</span>';
                            }
                        }
                        if (row.IsGifted) {
                            badges += '<a class="student-badge badge badge-pill badge-GT px-2 mb-2 mr-2 text-decoration-none cursor-default" title="Gifted and Talented">G&T</a>';
                        }
                        if (row.IsSpecialEd) {
                            if (relatedServiceAccess) {
                                badges += '<a class="student-badge badge badge-pill badge-SpE px-2 mb-2 text-decoration-none" href="/RelatedServices/Student/StudentDetail?StudentId='
                                    + row.StudentID + '" target="_blank" title="Special Education (' + row.SpecialEdCode + ' - ' + row.SpecialEdDescription + ')">SpEd</a>';
                            } else {
                                badges += '<span class="student-badge badge badge-pill badge-SpE px-2 mb-2 text-decoration-none cursor-default" title="Special Education ({{SpecialEdDetailCode}} - {{SpecialEdDetailDescription}})">SpEd</span>';
                            }
                        }
                        if (row.IsSpeech) {
                            if (relatedServiceAccess) {
                                badges += '<a class="student-badge badge badge-pill badge-Spch px-2 mb-2 text-decoration-none" href="/RelatedServices/Student/StudentDetail?StudentId='
                                    + row.StudentId + '" target="_blank" title="Speech (' + row.SpecialEdCode + ' - ' + row.SpecialEdDescription + ')">Spch</a>';
                            } else {
                                badges += '<span class="student-badge badge badge-pill badge-Spch px-2 mb-2 text-decoration-none cursor-default" title="Speech (' + row.SpecialEdCode
                                    + ' - ' + row.SpecialEdDescription + ')">Spch</span>';
                            }
                        }
                        return badges;
                    }
                    return data
                })
            }
        ],
        dom: '<"#table-info-row.w-100 d-flex justify-content-start"i>tr',
        fixedHeader: true,
        drawCallback: ((settings) => {
            var api = new $.fn.dataTable.Api(settings);
            if (api.data().any()) {
                $('#table-info-row #results-table_info, #table-info-row .dt-buttons, #results-table thead').show();
            } else {
                $('#table-info-row #results-table_info, #table-info-row .dt-buttons, #results-table thead').hide();
            }
        }),
        info: true,
        language: {
            emptyTable: NoResultsHtmlGet(),
            info: '_TOTAL_ Records Total',
            loadingRecords: '&nbsp;',
            processing: LoadingIndicatorHtmlGet(),
            thousands: ',',
            zeroRecords: '&nbsp;'
        },
        ordering: true,
        order: [[0, 'asc']],
        paging: false,
        processing: true,
        searching: false
    });

    $('#update-results').click(() => {
        table.clear().draw();
        //$('#table-info-row #results-table_info, .dataTables_empty, #table-info-row .dt-buttons')
        //    .hide();
        table.ajax.reload();//.draw();
        $('#btn-search-collapse').removeClass('d-none');
        $('#search-filters').addClass('d-none');
    });

kthorngren

I'm not sure what all of these selectors are

$('#table-info-row #results-table_info, #table-info-row .dt-buttons, #results-table thead').show();

Do you have more than one table you are trying to hide? Looks like you are trying to hide more than just the thead. Maybe place your table in a div and hide that.

There is nothing obvious that seems to be an issue. Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

JACinDE

Thank you for your attention. The selectors are for the dom elements for table info and buttons (although buttons aren't used in this case, so that selector could be ignored).
I'm on mobile right now, and will try to stand up a test case later today, but I'm not sure I'll be able to properly mock the ajax parameterized search.
One other thought: could using a js 'arrow function' in the drawCallback be contributing to the problem? I've just started using them, and I know context is (ie this) is different.