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

Loren Maxwell

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?

Loren Maxwell

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!

kthorngren

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

kthorngren

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 Maxwell

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

Loren Maxwell

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

kthorngren

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 Maxwell

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

allan

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