Datatable state save

Easwar15

Hi i have only one datatable in a page for which i need to save the state. I am able to change the state with the below code

     $('#details').dataTable( {
            "bPaginate": true,
            "bJQueryUI": true,
             "bAutoWidth": false,
                     "bStateSave": true,
                    "order": [ 5, 'desc' ],
            "sPaginationType": "full_numbers",
            "sDom": '<"right"l><"right"fp>rt<"bottom"i><"clear">'
      } );

Actually i was able to save state with just "bStateSave": true But my problem is the saved state is persisting among different user logins which i dont want to happen. Hence i introduced the below code

                      "fnStateSave": function (oSettings, oData) {
                           localStorage.setItem( 'DataTables_'+userid, JSON.stringify(oData) );
                       },
                     "fnStateLoad": function (oSettings) {
                           return JSON.parse( localStorage.getItem('DataTables_'+userid) );
                      }

in a view that for each user i will have different places in localstorage with a key 'DataTables_'+userid. But i am wrong. The above code is ignored and still whatever state saved for previous user comes when the new user logsin and vice a versa.

After going thru some posts i had included "bServerSide": true. Now i get the below error

"DataTables warning: table id=details - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1"

My final code is given below

     $('#details').dataTable( {
            "bPaginate": true,
            "bJQueryUI": true,
             "bAutoWidth": false,
            "bServerSide": true,
                     "bStateSave": true,
                     "fnStateSave": function (oSettings, oData) {
                           localStorage.setItem( 'DataTables_'+path, JSON.stringify(oData) );
                       },
                     "fnStateLoad": function (oSettings) {
                           return JSON.parse( localStorage.getItem('DataTables_'+path) );
                      },
                    "order": [ 5, 'desc' ],
            "sPaginationType": "full_numbers",
            "sDom": '<"right"l><"right"fp>rt<"bottom"i><"clear">'
      } );

I am completely new for jquery and datatables. Please let me know where i am going wrong and what needs to be done. My requirement is to save datatable state for each user seperately in localstorage.

tangerine

"For more information about this error, please see http://datatables.net/tn/1"

Did you follow those directions to find out what is being returned by the server?

Easwar15

Hi gone thru the site and followed the directions. But i couldnt find any get request as shown in the site which ends with arrays.txt. There is only one get request which returns the source of the target page.(It is in that target page the above error is displayed in alert)

I dont think there was a request issued as shown in the site.

Easwar15

Hi i tried with the below code and still the same error

"DataTables warning: table id=details - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1"

$('#details').dataTable( {
"bPaginate": true,
"bJQueryUI": true,
"bAutoWidth": false,
"bServerSide": true,
"bStateSave": true,
"stateSaveCallback": function (settings, data) {
$.ajax( {
"url": "/"+path,
"data": data,
"dataType": "json",
"type": "POST",
"success": function () {}
} );
},
"stateLoadCallback": function (settings) {
var o;
$.ajax( {
"async": false,
"url": "/"+path,
"dataType": "json",
"success": function (json) {
o = json;
}
} );

                    return o;
                  },
           "order": [ 5, 'desc' ],
   "sPaginationType": "full_numbers",
   "sDom": '<"right"l><"right"fp>rt<"bottom"i><"clear">'

} );

But one difference is that in this approach there was a get request issued to 197910929351423837028680(this is the value of the path variable) and 404 not found(Request resource not available) is returned.

Kindly let me know what i am missing. Suggestions to any of the above two approaches would be fine. Else if there is a working code for the scenario mentioned kindly post it

Easwar15

Correcting the format of the code

     $('#details').dataTable( {
            "bPaginate": true,
            "bJQueryUI": true,
            "bAutoWidth": false,
            "bServerSide": true,
                    "bStateSave": true,
                    "stateSaveCallback": function (settings, data) {
                       $.ajax( {
                              "url": "/"+path,
                               "data": data,
                              "dataType": "json",
                              "type": "POST",
                              "success": function () {}
                               } );
                  },
               "stateLoadCallback": function (settings) {
                    var o;
                    $.ajax( {
                      "async": false,
                      "url": "/"+path,
                      "dataType": "json",
                      "success": function (json) {
                        o = json;
                      }
                    } );

                    return o;
                  },             
            "order": [ 5, 'desc' ],
                "sPaginationType": "full_numbers",
                "sDom": '<"right"l><"right"fp>rt<"bottom"i><"clear">'
      } );

allan

If the error message is invalid JSON, then that is where to look. What is the server responding with (see the tech note link above for how to get that information).

Allan

Easwar15

Hi Allan in the 2nd approach of using stateLoadCallback, get request fails with "404 not found(Request resource not available) ". Its trying to access /197910929351423837028680 as specified by

$.ajax( {
....
"url": "/"+path
...
}

But i have no idea why 404 is returned by server

allan

Do you actually have a file called 197910929351423837028680 on your server?

Allan