Datatable processing

genesisr

Hi!

I have a button that reload my table.

I want to syle datatable_processing to overlay all the whole screen in grey color everytime I clic in that button. how could I do this?

rf1234

You could use busyLoad for example: https://piccard21.github.io/busy-load/

If you want to use data table's processing indicator you can use CSS to change its appearance.

Works well.

I have a dropdown that allows you to select a different timeframe of historical data. If that dropdown changes I need to reload the data table and display the full screen spinner until the reload is completed. Here is the code:

$('#myDropDown').change( function() {
    $.busyLoadFull("show", { 
        fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw"
    });
    table.ajax.reload( function(){
                                     $.busyLoadFull("hide", { 
                                         // options here 
                                     })
                                 }, false)
                                 .columns.adjust()
                                 .responsive.recalc();
} );

Alternatively - using the data tables processing indicator - you can manipulate it with CSS like this for example (adding a spinner):

$.extend( true, $.fn.dataTable.defaults, {
    "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 ...",
        "select": {
            "rows": {
                _: '%d rows selected',
                0: 'Click row to select',
                1: '1 row selected'
            }
        }
    }
} );

genesisr

thanks for your reply!

I would like to try it with some Css, but I don't know how. I already have a loading icon, a spinner as you said . But also, i would like the whole screen grey with opacity and that's the thing that I don't know how to do.

Anyway, that PlugIn BusyLoad is cool

rf1234

But also, i would like the whole screen grey with opacity and that's the thing that I don't know how to do.

On the busy load page you can find this.
$.busyLoadSetup({ animation: "slide", background: "rgba(255, 152, 0, 0.86)" });

You can set the background color to grey and also set the opacity. Doesn't seem to be a problem if you use busyLoadFull.
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

I didn't make any changes to the busyLoad defaults. As you can see I have the grey background automatically without doing anything. I use Bootstrap 3 and the font awesome spinner. Of course you can use something else as well ...

rf1234

With this

$.busyLoadSetup({ background: "rgba(255, 152, 0, 0.86)" });

it looks like below:

And with this:

$.busyLoadSetup({ background: "rgba(189, 195, 199, 0.7)" });

like this:

I'll stick with the default

rf1234

If you wanted to achieve the same result manipulating the Data Tables processing node you would need to manipulate the div generated here in the Data Tables Javascript code:

/**
 * Generate the node required for the processing node
 *  @param {object} settings dataTables settings object
 *  @returns {node} Processing element
 *  @memberof DataTable#oApi
 */
function _fnFeatureHtmlProcessing ( settings )
{
        return $('<div/>', {
                        'id': ! settings.aanFeatures.r ? settings.sTableId+'_processing' : null,
                        'class': settings.oClasses.sProcessing
                } )
                .html( settings.oLanguage.sProcessing )
                .insertBefore( settings.nTable )[0];
}

In my code above I manipulate the html that is passed in as "settings.oLanguage.sProcessing". I don't see a way to change the size of the div containing the processing indicator using the API.

genesisr

Thanks for your suggestion!.

I found a plugin called BlockUI and it did the trick .

Basically, in my button to refresh I assing it an "id" (reload):

<i class="fas fa-sync-alt " id="reload""></i>

In my js file, I made this.

$('#reload').on('click', function(){

    //Here , I can configure the overlay
    //When I click on the reload button, appears a grey screen and a spinner while / 
    //table is loading.
        $.blockUI({ 
             css: {
                    backgroundColor: 'transparent',
                    border: 'none'
                  },
             overlayCSS: { opacity:.3 },
            message: $('<span id="spinner" style="width:100%;"><img src="images/spinnerLoading.gif"></span>'),
        }); 

         // Here, I called my Post method that filter the table, also, 'unblock' the screen.
         // I mean, when this filter has the table loaded , the grey screen will dissapear
         // with $.unblockUI();

        getFromURL.async('myFilter', 'post').then(
            function(response) {
                 $.unblockUI();
        });

    }); 

It works like a charm , I recommend it :P

BlockUi is similar to BusyLoad, but I hope I could help someone who has this issue !

rf1234

Cool!

Same solution using busyLoad and the font awesome spinner. Please note: using $.busyLoadSetup you don't need to repeat the settings for each use case.

//4th parameter of "background" is opacity by the way
//see: https://www.w3schools.com/css/css3_colors.asp
$.busyLoadSetup({background: "rgba(255, 152, 0, 0.86)",
                 fontawesome: "fa fa-spinner fa-spin fa-3x fa-fw"});

$('#reload').on('click', function(){
    $.busyLoadFull("show");
    getFromURL.async('myFilter', 'post').then(
        function(response) {
             $.busyLoadFull("hide");
    });
});

Using ajax.reload with the responsive extension it works like this:

$('#reload').on('click', function(){
    $.busyLoadFull("show");
    table.ajax.reload( function(){
        $.busyLoadFull("hide");
     }, false)
     .columns.adjust()
     .responsive.recalc();
});

genesisr

Oh that's great! It's kind of another way to find the same as I expected . Both solutions are good, so thank you for helping me!

I will try with busyLoad to see how it works too