hide div if no records

montoyam

If there are no records returned, I want to hide the div that contains the DataTable. If I put the code at the end of the document.ready then it executes before the ajax call is done. However, if I put the code in the ajax success, the data table doesn't render correctly. I have seen several posts that talk about not using success because dataTables needs the response back. But I can't find any posts that talk about the correct way to do this.

Here is what I tried but doesn't work if I need to show the table with data:

        var LanguageLineMissingFundOrgTable = $('#LanguageLineMissingFundOrg').DataTable({
            dom: 'Bfrtip',
            ajax: {
                url: 'api/LanguageLineMissingFundOrg',
                success: function (response) {
                    if (response.data.length == 0) {
                        $("#missingDiv").hide();
                    } else {
                        $("#missingDiv").show();
                    }
                }
            },
            //ajax: 'api/LanguageLineMissingFundOrg',
            columns: [
                { data: "Department", title: "Language Line Dept Name" },
                { data: "CallCount", title: "# Charges" }
            ],
            select: { style: 'single' },
            buttons: [
                { extend: 'create', editor: LanguageLineDeptFundOrgEditor }
            ]
        });

montoyam

ah, I found one way. not sure if there is a better way:

        LanguageLineMissingFundOrgTable.on('xhr', function () {
            var json = LanguageLineMissingFundOrgTable.ajax.json();
            if (json.data.length == 0) {
                $("#missingDiv").hide();
            } else {
                $("#missingDiv").show();
            }
        });

colin

That's as good as any!

Colin

montoyam

ok. thanks.