How do I save and retrieve state using ajax and dotnet?
How do I save and retrieve state using ajax and dotnet?
drscarbro
Posts: 2Questions: 1Answers: 0
Hello,
I've implemented stateSave, stateSaveCallback, and stateLoadCallback in DataTables.
Each parameter has been validated.
I can save the state to SQL, and I can retrieve the state from SQL.
However, something overwrites the saved state after I retrieve it and the saved state never loads.
Does anyone have a best practice example for implementing DataTables with server-side state management in dotnet?
I have pasted the DataTables code below.
function LoadCallListTable(campaignId, contactTypeId, initLoad) {
// destroy table if it is initialized
if (oTable != null) {
oTable.destroy();
}
var init = false
if (initLoad == true) {
init = initLoad
}
oTable = $('.dataTables-example').DataTable({
processing: true,
serverSide: true,
pageLength: 25,
drawCallback: function () {
var row = oTable.columns(2).data().eq(0).indexOf(rowId)
$(oTable.row(row).nodes()).addClass('danger')
},
search: {
caseInsensitive: true
},
stateSave: true,
stateSaveCallback: function (settings, data) {
json = JSON.stringify($.extend({}, data, {
campaignId: campaignId,
contactTypeId: contactTypeId,
// add filters to filter expression
filters: $('input:checkbox[name="actionFilter"]:checked').map(function () {
return this.value
}).get().join('|'),
initLoad: init
}))
$.ajax({
data: json,
type: 'POST',
url: 'campaign/SaveState?json=' + json,
dataType: 'json',
success: function () {}
})
},
stateLoadCallback: function (settings, callback) {
$.ajax({
dataType: 'json',
url: 'campaign/GetState?campaignId=' + campaignId + '&clientTypeId=' + contactTypeId,
success: function (json) {
callback(json)
}
})
},
dom: '<"html5buttons"B>lTrfgtip',
buttons: [],
ajax: {
"type": "POST",
"url": '/Campaign/GetCallList',
"data": function (d) {
return $.extend({}, d, {
campaignId: campaignId,
contactTypeId: contactTypeId,
// add filters to filter expression
filters: $('input:checkbox[name="actionFilter"]:checked').map(function () {
return this.value
}).get().join('|'),
initLoad: init
});
}
},
columns: [
{
data: "lastContactActionTypeId",
name: "lastContactActionTypeId",
sortable: false,
searchable: false,
visible: false,
},
{
data: "lastContactActionTypeId",
name: "lastContactActionTypeId",
sortable: false,
searchable: false,
visible: true,
width: 50,
className: "text-center",
render: function (data, type, full) {
// update icons
switch (data) {
case 1:
return "<i class='text-info fas fa-calendar-check fa-2x'></i>";
case 2:
return "<i class='text-warning fas fa-blender-phone fa-2x'></i>";
case 5:
return "<i class='text-info fas fa-dollar-sign fa-2x'></i>";
case 6:
return "<i class='text-danger fas fa-phone-slash fa-2x'></i>";
case 7:
return "<i class='text-warning fas fa-calendar-times fa-2x'></i>";
case 8:
return "<i class='text-danger fas fa-unlink fa-2x'></i>";
case 10:
return "<i class='text-info fas fa-question-circle fa-2x'></i>";
case 12:
return "<i class='text-info fas fa-envelope fa-2x'></i>";
case 18:
return "<i class='text-warning fas fa-thumbs-down fa-2x'></i>";
case 20:
return "<i class='text-muted fas fa-fax fa-2x'></i>";
case 21:
return "<i class='text-info fas fa-bullhorn fa-2x'></i>";
case 26:
return "<i class='text-info fas fa-mobile-alt fa-2x'></i>";
default:
return "";
}
}
},
{
data: "businessId",
name: "businessId",
sortable: false,
searchable: false,
visible: true
},
{
data: "businessName",
name: "businessName",
visible: true
},
{
data: "lastContactDate",
name: "lastContactDate",
type: "date",
visible: true,
sortable: true,
render: function (data, type, full) {
if (data != null) {
return moment(data).format('MM/DD/YYYY');
}
else {
return "";
}
}
},
{
data: "lastSoldDate",
name: "lastSoldDate",
visible: true,
render: function (data, type, full) {
if (data != null) {
return moment(data).format('MM/DD/YYYY');
}
else {
return "";
}
}
},
{
data: "businessId",
name: "businessId",
sortable: false,
searchable: false,
visible: true,
render: function (data, type, full) {
cellHtml = "<a href='#' class='btn btn-primary loadBusinessInfo' id='" + data + "'><i class='fa fa-search'></i></a>";
return cellHtml;
}
},
],
"initComplete": function (oSettings, json) {
// load available contact actions into call list filter
var actions = [];
oTable.column(0).data().unique().sort().each(function (d, j) {
if (d != null) {
actions.push(parseFloat(d));
}
});
$.ajax({
url: "/campaign/GetActionFilters",
type: "POST",
dataType: "html",
data: { actionFilters: actions },
success: function (data) {
$("#campaign-filters").html(data);
isCallBack = true
}
})
}
});
}
This discussion has been closed.
Answers
I've updated my code and used the answers from #139137 to retrieve the state.
https://datatables.net/forums/discussion/comment/139137/#Comment_139137
Not sure how to close this or mark it resolved.