jQuery DataTables save scroll position after dialog pop-up - datatables

Question

I have a table that shows a pop-up when the first cell is clicked like this:
$('#tblAllUsers tbody').on('click', 'td', function () {
var visIdx = $(this).index();
if (visIdx != 0) {
return false;
}
var par = this.parentNode.parentNode.id;
var oTable = $("#tblAllUsers").dataTable();
var rowIndex = $(this).closest('tr').index();
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
var name = aData[1];
if (name != '') {
GetUser(name, rowIndex, "#tblAllUsers");
}
else {
ErrorDialog("#MessageDialog", "#lblError", "The User ID is blank in that row.", "No User ID");
return false;
}
});
The pop-up allows the user to modify fields and save it, close the dialog and then return to the grid. If the dialog is canceled, data not saved, the scroll is maintained. But if the data is saved, and I am not reloading the table, the table moves to the top. The AJAX update function is within the pop-up:
$.ajax({
type: 'POST',
data: $("#formUserModification").serializeArray(),
url: '#Url.Action("UpdateUser")',
success: function (data) {
if (data.Errors === 'ERROR') {
ErrorDialog("#MessageDialog", "#lblError", "There was an error encountered in modifying the user, please try again later.", "Error");
}
else {
updateTable(data);
}
$("#divDetails").dialog('close');
},
beforeSend: function () {
$("#divOverlay").show();
},
complete: function () {
$("#divOverlay").hide();
}
});
The update function simply loads the row:
function updateTable(data) {
var tab = $("#tblAllUsers").dataTable();
tab.fnUpdate(data.LastName + ', ' + data.FirstName, data.RowIndex, 0);
tab.fnUpdate(data.ID, data.RowIndex, 2);
tab.fnUpdate(data.LocationText, data.RowIndex, 3);
tab.fnUpdate(data.SiteText, data.RowIndex, 4);
}
Is there a way with this setup to keep the scroll position?

Answer 1

I accomplished my goal by doing this:
Define a variable:
var scrollToPos;
In the dialog definition set the value when it is opened and place the scroll bar when it is closed:
$("#divAllUsersDetail").dialog({
autoOpen: false,
width: '90%',
resizable: false,
draggable: false,
title: 'Details',
position: { my: 'top', at: 'top+100' },
modal: true,
closeOnEscape: false,
open: function() {
scrollToPos = $("#divAllUsers").find(".dataTables_scrollBody").scrollTop();
},
close: function () {
$("#divAllUsers").find(".dataTables_scrollBody").scrollTop(scrollToPos);
},
show: {
effect: 'drop', direction: 'up'
},
hide: {
effect: 'fade', duration: 200
},
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
}).prev("ui-dialog-titlebar").css("cursor", "default");
This works famously.