Datatable processing

Datatable processing

genesisrgenesisr Posts: 15Questions: 6Answers: 0

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?

Replies

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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'
                }
            }
        }
    } );
    
  • genesisrgenesisr Posts: 15Questions: 6Answers: 0

    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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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 ...

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited May 2020

    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 :smile:

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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.

  • genesisrgenesisr Posts: 15Questions: 6Answers: 0

    Thanks for your suggestion!.

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

    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 :)!

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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();
    });
    
  • genesisrgenesisr Posts: 15Questions: 6Answers: 0

    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 :)

This discussion has been closed.