jQuery DataTable - "Processing" does not appear

0

I am having problem displaying the processing message in a jQuery data table. I looked around for this issue and followed all suggestions to no avail. Only one suggestion works but partially.

I tried:

var tblFacCert = $("#tblFacCert").on('processing.dt', function (e, settings, processing) {
    if (processing) {
        if ($('#imgLoad').length == 0)
            $(this).prepend('<img id="imgLoad" src="../assets/images/PleaseWait.gif" alt="" />');
    }
    else
        $('#imgLoad').remove();
}).DataTable({
    dom: 'lfrtip',
    processing: true,
    ....
}),

Also:

<style type="text/css">
    #tblFacCert_processing {
        top: 64px !important;
        z-index: 11000 !important;
        visibility:visible;
        background-image:url("../assets/images/PleaseWait.gif"); background-repeat:no-repeat;
    }
</style>

This partially works. It shows the the word "Processing ..." but won't go away when table is populated. Also, it shows up on page postback, like making a selection in a drop down list, presumably because I am redrawing on postback.

"preDrawCallback": function () {
    $('.dataTables_processing').attr('style', padding-bottom: 60px; display: block; z-index: 10000 !important');
},

Update - after adding serverSide:true

I had initially added "serverSide: true" to data table definition but removed it after getting this error: "Unhandled exception at line 36, column 442 in https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js 0x800a138f - JavaScript runtime error: Unable to set property 'data' of undefined or null reference".

I have two data tables on the page, they get populated when a "Submit" button is clicked. This is how I am setting up and populating them (I am including one data table only for brevity)

var tblFacCert = $("#tblFacCert").DataTable({
    jQueryUI: true,
    "serverSide": true, // This causes error
    data: [],
    dom: 'lfrtip',
    processing: true,
    stateSave: true,
    "lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "All"]],
    order: [[0, "asc"], [1, "asc"], [2, "asc"], [3, "asc"]],

    "columns": [
        {
            "data": "Area"
        }, {
            "data": "District"
        }, { ... more columns ...}
    ],
    "columnDefs": [ ...
    ],
    "pageLength": 15,
    deferRender: true,
    scrollCollapse: true,
    scroller: true,
    "preDrawCallback": function () {
        $('#tblFacCert_processing').attr('style', 'padding-bottom: 60px; display: block; z-index: 10000 !important');
    },
    "rowCallback": function (row, data, index) {
        ...
    }
});

// Get data for both data tables and populate
$("#btnSubmit").on("click", function (event) {
    var facCertUrl = "../services/easg.asmx/GetComplianceReportData";
    var facCertParams = "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}";
    var statsUrl = "../services/easg.asmx/GetFacComplianceByArea";
    var statsParams = "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}";
    populteTable(statsUrl, statsParams, tblStats);
    populteTable(facCertUrl, facCertParams, tblFacCert);
})

function populteTable(ws_url, parameters, table) {
    $.ajax({
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        url: ws_url,
        cache: false,
        data: parameters,
    }).done(function (result) {
        table.clear().draw();
        table.processing = true;
        jResult = JSON.parse(result.d);
        table.rows.add(jResult).draw();
    }).fail(function (jqXHR, textStatus, errorThrown) {
        alert(textStatus + ' - ' + errorThrown);
    });
}
javascript
jquery
datatables
asked on Stack Overflow May 5, 2018 by NoBullMan • edited May 5, 2018 by NoBullMan

1 Answer

0

The processing message would only be displayed if you've got server-side processing enabled. In the example here, you'll see it flick up briefly, but only briefly as the dataset is small the processing takes little time.

    var dt = $('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "/ssp/objects.php",
    "columns": [
        { "data": "first_name" },
        { "data": "last_name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "start_date" },
        { "data": "salary" }
    ]
} ); 

If this doesn't resolve it for you, and it doesn't display the processing message, it would be worth pasting your entire table initialisation code.

answered on Stack Overflow May 5, 2018 by colin0117

User contributions licensed under CC BY-SA 3.0