How to display a progress indicator for serverside processing

snunn

Can't seem to find an example that shows a progress indicator while the server side request is being processed. Is there one available?

lecleard

Add the option processing: true. This will show a "processing" message while the data loads.

https://datatables.net/examples/data_sources/server_side.html

snunn

How would I make it a spinning icon vs text?

bindrid

I used the font Awesome spinner from http://fontawesome.io/examples/#animated and it seem to work.
```
$(document).ready(function () {
$('#example').DataTable({

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


                "serverSide": true,
                "ajax":{

            url: "wsService.asmx/GetDTDataSerializedList",
            type: "Post",
            dataFilter: function (res) {
                debugger;
            },
                    error:function(x, y){
                        console.log(x);
                        debugger;
                    }
                },
                "columns": [
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "start_date" },
                { "data": "salary" }
                ]
            });
        });

```

bindrid

I put it here http://live.datatables.net/kihecona/1/edit since there is not a real ajax call, it throws up an error but you see it spin until you close the error.

Just hit "Run with JS" button

snunn

That's perfect.

echo18

Works well!!

mastercoria

How to dynamically show and hide processing box? I don't want to depend on DataTable internal AJAX call.

kthorngren

@mastercoria Checkout the processing() plugin.

Kevin