Adding a visible Processing... or loading... graphic to server-side pagination

athanasius

The processing notice on data tables is almost invisible so we want to make it stand out. I've tried the solution here:
https://datatables.net/forums/discussion/comment/177491/#Comment_177491

This is my functional data table code which I can't show live because of our environment.

I tried replacing the "processing": true with the code from the example but it didn't do anything except remove the Processing notice.

I also tried putting the full $.extend code in the jquery.datatables.js file which didn't do anything either. Where should I put the code to change the processing notice?

 "language": {
        "processing": "<span class='fa-stack fa-lg'>\n\
                            <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                       </span>&emsp;Processing ...",
    }

$('.dataTable.serverSide').each(function(){
        
        $this = $(this);
        var thisID = $this.attr('id');
        var dtChk = $.fn.dataTable.isDataTable('#'+thisID);
        if(dtChk == false && thisID != undefined) { 
            var url = $this.attr('dataLoadURL')+ '&' + 'header=0&' + systemVars + '&s='+$.now();
            var columnUrl = $this.attr('dataLoadURL')+ '&' + 'header=1&' + systemVars + '&s='+$.now();
            var columns = [];
            
            $.ajax({
                url: columnUrl,
                /*beforeSend: function(){
                    $('body').addClass('loading');
                },
                complete: function(){
                    $('body').removeClass('loading');
                },*/
                success: function (data) {
                    data = JSON.parse(data);
                    columnNames = Object.keys(data.data[0]);
                    for (var i in columnNames) {
                      columns.push({data: columnNames[i], 
                                title: columnNames[i]});
                    } 
                    var table = $('#'+thisID).DataTable({
                        "columns" : columns,
                        "processing": true,
                        "retrieve": true,
                        "scrollX": true,
                        "serverSide": true,
                        "search": {
                            return: true
                        },
                        "language": {
                            "emptyTable":     "No results found.",
                        },
                        "ajax": {
                            "url": url,
                            "contentType": "application/json",
                            "type": "POST",
                            "dataType": "json",
                            "data": function ( d ) {
                              return JSON.stringify( d );
                            }
                        }
                    });

                    table.on('draw', function() {
                        $('#'+thisID+' tr').find('.binder').each(function() { 
                            $this = $(this);
                            thisFunc = $this.attr('thisFunc');

                            $this.on('click', function() {
                                        window[thisFunc](this);
                            });
                        });

                        $('#'+thisID+' tr').find('.binder2').each(function() { 
                            $this = $(this);
                            thisURL = $this.attr('thisURL');
                            $this.attr('href', thisURL);
                        });

                    });
            }
            });
        };
    });

allan

The language.processing option goes inside the language object of your DataTable configuration object. If that isn't working for you, please link to a test case showing the issue.

Allan

athanasius

I added the processing flag to the call but it still doesn't work. I can't post a live example because this is on an intranet.

var table = $('#'+thisID).DataTable({
                        "columns" : columns,
                        "retrieve": true,
                        "scrollX": true,
                        "serverSide": true,
                        "search": {
                            return: true
                        },
                        "language": {
                            "processing": "<span class='fa-stack fa-lg'>\n\
                            <i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
                       </span>&emsp;Processing ..."
                        },
                        "ajax": {
                            "url": url,
                            "contentType": "application/json",
                            "type": "POST",
                            "dataType": "json",
                            "data": function ( d ) {
                              return JSON.stringify( d );
                            }
                        }
                    });

colin

It's appearing here - it's not using BS4 so the styling is wacky, but hopefully that'll get you going,

Colin

athanasius

Thank you. I had an old datatables style sheet that seems to have been part of the problem. However, internally the spinner only works on the initial load, not on each pagination.

allan

It should work if you are using server-side processing. If you are using client-side processing though, then no it won't show as that is effectively a synchronous action and should only take a fraction of a second.

Allan

athanasius

It is definitely server side.

allan

I'd need a link to the page showing the issue to be able to understand why it isn't working in that case.

Allan