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!
