Spinner for server side processing of jquery datatable

Question

I have a jquery datatable version 1.10 with server side processing. Everything is working fine. However my requirement is to show a spinner for every ajax call instead of default "Processing..." message. Tried multiple ways but nothing works.

Here is my code:

$("#table-pp").DataTable({
    "processing": true,
    "order": [[2, "asc"]],  
    "pagination": true,
    "language": {
        "infoFiltered": "",
        "processing": "Loading. Please wait..."
    },
    "serverSide": true,
    "destroy": true,
    "ajax": {
        "type": "POST",
        "url": "/Site/test/GetData",
        "data": { param: XYZ},
        "error": function (e) {
        },
        "dataSrc": function (json) {               
            json.draw = json.draw;
            json.recordsTotal = json.recordsTotal;
            json.recordsFiltered = json.recordsFiltered;
            return json.data;
        }
    },
    "initComplete": function () {
        //spinStop();         
    },

I have two functions, i.e startspin and stopspin that i want to call once ajax call is made and after completion.

function spinStart() {
    $('#test_center').show().spin({ color: '#fff' });
    $('#test').show();
}


function spinStop() {
    $('#test, #test_center').hide();
}

Answer 1

It's not about your start and stop spin functions, the solution to your problem is to place these functions in the right place.

When you start ajax call, you call spinStart. Once the ajax call is finished, you call spinStop inside the ajax callback to stop the spinner.

Also, please provide your ajax call function with your question as well, it will be helpful to debug your issue.

EDIT1:

"language": { processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '}

That's FontAwesome spinner. Alternatively, you can replace it with a small spinner gif.

EDIT2:

If you somehow don't want to use GIF or FontAwesome, no problem at all.

It seems like ajax call success callback is not the direct trigger for DataTable to refresh and show the new data, so it won't work if you place spinStop function inside ajax success callback.

Instead, DataTable provides two functions to trigger a draw event, which are preDrawCallback and drawCallback

The workflow should be:

1. call spinStart inside preDrawCallback to show spinner
2. call spinStop inside drawCallback to stop spinner

$("#table-pp").DataTable({
    "processing": true,
    "order": [[2, "asc"]],  
    "pagination": true,
    "language": {
        "infoFiltered": "",
        "processing": "Loading. Please wait..."
    },
    "serverSide": true,
    "destroy": true,
    "ajax": {
        "type": "POST",
        "url": "/Site/test/GetData",
        "data": { param: XYZ},
        "error": function (e) {
        },
        "dataSrc": function (json) {               
            json.draw = json.draw;
            json.recordsTotal = json.recordsTotal;
            json.recordsFiltered = json.recordsFiltered;
            return json.data;
        }
    },
    'preDrawCallback': function(settings) {
      spinStart();
    },
    'drawCallback': function(settings) {
      spinStop();
    }