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

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

athanasiusathanasius Posts: 33Questions: 3Answers: 0

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);
                        });

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • athanasiusathanasius Posts: 33Questions: 3Answers: 0

    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 );
                                }
                            }
                        });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

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

    Colin

  • athanasiusathanasius Posts: 33Questions: 3Answers: 0

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

  • athanasiusathanasius Posts: 33Questions: 3Answers: 0

    It is definitely server side.

  • allanallan Posts: 61,438Questions: 1Answers: 10,052 Site admin

    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

Sign In or Register to comment.