Add same animation after ajax.reload() as an Editor table refresh

Add same animation after ajax.reload() as an Editor table refresh

Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

After updating a row with Editor the table does a little animated flash of blue to indicate the table has been refreshed.

I'd like to implement the same effect after the data is reloaded using ajax.reload().

Is there something in the Datatable API that I would call?

This question has an accepted answers - jump to answer

Answers

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10
    edited June 2023

    I plucked this out of the Editor code and added it (slightly modified) to my function after the ajax reload:

    table.ajax.reload()
    
    nodes = $(table.rows().nodes());
    setTimeout(function () {
        nodes.addClass('highlight');
        setTimeout(function () {
            nodes
                .addClass('noHighlight')
                .removeClass('highlight');
            setTimeout(function () {
                nodes.removeClass('noHighlight');
            }, 550);
        }, 500);
    }, 20);
    

    Works great, although I'm open to suggestions if there's a better approach, especially one that would access the Editor private method just in case it should ever change!

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited June 2023

    One option is to use the processing() plugin. That shows the same processing indicator that Datatables uses with processing like this example. You can see the last example in the docs here:
    https://live.datatables.net/ribifuda/1/edit

    However it looks like you want to flash all the rows instead. With the above code you can use the xhr event instead of a setTimeout function, for example:

    table.one('xhr', function () {
        nodes = $(table.rows().nodes());
        nodes.addClass('highlight');
        setTimeout(function () {
            nodes
                .addClass('noHighlight')
                .removeClass('highlight');
            setTimeout(function () {
                nodes.removeClass('noHighlight');
            }, 550);
        }, 500);
    });
    
    table.ajax.reload();
    

    Note the use of one() instead of on() so the event handler runs only once after the ajax.reload().

    Not sure about accessing the Editor private function.

    Kevin

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    Another thing you might want to do is limit the flashed rows to those on the page using selector-modifier of { page: 'current' }, for example:

    nodes = $(table.rows( { page: 'current' } ).nodes());
    

    Kevin

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    Thanks, @kthorngren (Kevin) -- a great help as always!

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    I had to add back in the initial outer setTimeout function since the adding and the removal of the "highlight" class was happening so fast it wasn't visible.

    table.on('xhr', function () {
        setTimeout(function () {
            nodes = $(table.rows( { page: 'current' } ).nodes());
            nodes.addClass('highlight');
            setTimeout(function () {
                nodes
                    .addClass('noHighlight')
                    .removeClass('highlight');
                setTimeout(function () {
                    nodes.removeClass('noHighlight');
                }, 550);
            }, 500);
        }, 20);
    });
    
    table.ajax.reload()
    
    
  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    Oh ok. I thought it was to delay execution to wait for the response.

    I assumed you are calling a function for this so you might want to change table.on('xhr' to table.one('xhr'. Otherwise you will be tacking on another event handler each time the function is called. If you call the function three times you will have three event handlers that will run with .on(). My assumption might be wrong though.

    Kevin

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10
    edited June 2023

    Ah yeah -- I changed it from table.one('xhr' to table.on('xhr' when I was troubleshooting the reason for not seeing the flash and forgot to change it back.

    Thanks for catching that!

    For anyone interested here's the final (at least so far!):

    table.one('xhr', function () {
        setTimeout(function () {
            nodes = $(table.rows( { page: 'current' } ).nodes());
            nodes.addClass('highlight');
            setTimeout(function () {
                nodes
                    .addClass('noHighlight')
                    .removeClass('highlight');
                setTimeout(function () {
                    nodes.removeClass('noHighlight');
                }, 550);
            }, 500);
        }, 20);
    });
     
    table.ajax.reload()
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Works great, although I'm open to suggestions if there's a better approach, especially one that would access the Editor private method just in case it should ever change!

    Funnily enough, I just changed that code for the first time in years only two days ago. I've updated the CSS so it no longer needs the intermediate noHighlight class. It will now flash an offset "border" around the row being changed with the updated CSS (which works better with now the row selection colours work). These changes will be in Editor 2.2 which will drop before the end of the month.

    If that code is working for you, I'd just copy it out and use it in a function of your own (which it looks like you've now done).

    Allan

Sign In or Register to comment.