Row animation missing after ajax.reload()

fungus007

I'm trying to implement a branded row animation (e.g., fade-in or highlight) after calling table.ajax.reload(null, false) in DataTables. The goal is to visually indicate updated rows after an AJAX refresh.

I've placed the animation logic inside drawCallback, and confirmed via console.log that the callback executes. However, the animation doesn't visibly trigger — even though the class is applied.

$(document).ready(function () {
    usersTable = $('#usersTable').DataTable({
        ajax: {
            url: '/Admin/GetUsersAjax',
            type: 'GET',
            dataSrc: function (json) {
                console.log("AJAX response received:", json);
                return json.data;
            },
            error: function (xhr) {
                console.error("DataTables AJAX error:", xhr.responseText);
                alert("Failed to load user data.");
            }
        },
        drawCallback: function (settings) {
            console.log("drawCallback triggered");

            $('#usersTable tbody tr').each(function () {
                const row = $(this);
                row.removeClass('row-animate');
                void row[0].offsetWidth; // force reflow
                row.addClass('row-animate');
                console.log("Animation class applied to row:", row.text());
            });
        },
        order: []
    });

    // Optional: clean up after animation
    $('#usersTable').on('animationend', 'tr.row-animate', function () {
        $(this).removeClass('row-animate');
        console.log("Animation class removed after animationend");
    });
});

function PopupForm(url) {
    console.log("PopupForm called with URL:", url);

    var formDiv = jQuery('#masterModal');

    jQuery.get(url, function (response) {
        console.log("PopupForm GET response received:", response);

        if (response.trim().length > 0) {
            jQuery('#modalBody').html(response);
            formDiv.modal('show');
            console.log("Modal shown with content.");
        } else {
            console.warn("Modal content is empty. Skipping modal popup.");
        }
    }).fail(function (xhr) {
        console.error("PopupForm GET failed:", xhr.responseText);
    });
}

function SubmitForm(form) {
    console.log("SubmitForm triggered for form:", form);

    jQuery.validator.unobtrusive.parse(form);
    console.log("Validation parsed.");

    if (jQuery(form).valid()) {
        console.log("Form is valid. Submitting via AJAX...");

        jQuery.ajax({
            type: 'POST',
            url: form.action,
            data: jQuery(form).serialize(),
            success: function (data) {
                console.log("AJAX POST success:", data);

                if (data.success) {
                    if (document.activeElement) {
                        document.activeElement.blur();
                        console.log("Active element blurred.");
                    }

                    $('#masterModal').modal('hide');
                    console.log("Modal hidden after success.");

                    usersTable.ajax.reload(function () {
                        console.log("DataTable reloaded.");

                        const nodes = $(usersTable.rows().nodes());
                        console.log("Table rows fetched:", nodes.length);

                        nodes.each(function () {
                            const rowData = usersTable.row(this).data();
                            console.log("Checking row:", rowData);

                            if (rowData && String(rowData.UserID) === String(data.newUserID)) {
                                console.log("Matching row found. Applying animation.");
                                $(this).addClass('new-row-animate');

                                setTimeout(() => {
                                    $(this).removeClass('new-row-animate');
                                    console.log("Animation class removed after timeout.");
                                }, 1500);
                            }
                        });
                    }, false);

                    jQuery.notify(data.message, {
                        globalPosition: 'top center',
                        className: 'success'
                    });
                } else {
                    console.warn("Server returned error state:", data.message);
                    $('#modalBody').html(data.html);

                    jQuery.notify(data.message, {
                        globalPosition: 'top center',
                        className: 'error'
                    });
                }
            },
            error: function (xhr) {
                console.error("AJAX POST failed:", xhr.responseText);

                jQuery.notify("Server error occurred", {
                    globalPosition: 'top center',
                    className: 'error'
                });
            }
        });
    } else {
        console.warn("Form validation failed.");
    }

    return false;
}

/* Animation for adding new row in table */
@keyframes rowFlash {
    0% {
        background-color: #c6f6d5;
    }

    50% {
        background-color: #90ee90;
    }

    100% {
        background-color: transparent;
    }
}

#usersTable tbody tr.new-row-animate {
    animation: rowFlash 1.2s ease-in-out;
}

Any help would be greatly appreciated!

kthorngren

That's a lot of code to try debugging. I grabbed some of it and built a test case:
https://live.datatables.net/socirone/1/edit

I used the ajax.reload() function you have in line 46 and the new-row-animate is working. Please provide a link to your page or a test case that replicates the issue so we can help debug.

Not sure what your CSS is for the row-animate class added in rowCallback. Possibly there is a conflict between that and the new-row-animate class.

Kevin