Jquery datatable statesave not working with MVC

See more:

C#

MVC

jQuery

DataTable

ASP.NET5

I am using jQuery data tables to display data in grid format with EDIT and delete options respectively, and grid having paging with 15 records per page.

I am able to display records using ajax call on grid, here when user click on edit I am redirecting to other page, and after saving record I am redirecting back to grid display page, when I am redirecting back grid is not maintaining current stats, means if I edit record from second page on grid then when I am redirecting back it is going to first page again.


With jQuery datatable I am using saveState:true, this is working 2nd time, but on initial page load this is not working.

What I have tried:

below is My page1 code:

DisplayPage.Cshtml:

<table id="tblData" class="grid">
         <thead>
             <tr>
                 <th>Id#</th>
                 <th>First Name</th>
                 <th>Last Name</th>
                 <th>Join Date</th>
                 <th>Status</th>
                 <th>Edit</th>
                 <th>Delete</th>
             </tr>
         </thead></table>

Below is my Jquery datatable code with ajax call:

$('#tblData').DataTable({
           "pageLength": 15,
           "order": [],//default sorting to nothing
           "saveState":true,
           "ajax": {
               "url": '/Display/LoadData',
               "data": { "Id": $('#Id').val() },
               "type": "get",
               "datatype": "json"
           },
           "error": function (xhr) {
               alert(errorMessage);
           },
           "columns": [
               {

               { "data": "Id", "name": "Id#", "autoWidth": true },
               { "data": "FirstName", "name": "First Name", "autoWidth": true },
               { "data": "LastName", "name": "Last Name", "autoWidth": true },
               { "data": "JoinDate", "name": "Join Date", "autoWidth": true},
               { "data": "Status", "name": "Status", "autoWidth": true },
               {
                   data: null, "render": function (data) {

                       if (data.StatusId == 3 ) {
                           var printPath = urlPath + "Display/Edit/"+data.id;
                           return '<a  href="' + printPath + '" title="Edit"</a>';
                       }
                       return "";
                   }
               },
               {
                   data: null, "width": "50px", "render": function (data) {


                       if (data.StatusId == 4) {

                           return "<a href='#' title='Delete' class='fa fa-trash fa-2x text-danger' onclick=Delete('" + data.Id+ "','" )></a>";
                       }
                       return "";
                   }
               }

           ],
       })