Difficulty with stateSaveCallback and stateLoadCallback

v3nky

Dear Team,

I have been using the below config to save the ordering and visibility of the columns based on the user . Unfortunately , the below code is able to save but when I reload the page all the columns in default order .

Also I have observed that var dataenc=encodeURIComponent(data) is displayed as below.

data is :[object Object]. Please advise where am i going wrong with below code.

 stateSave: true,
                "stateSaveCallback": function (settings, data) {
                    var uname=encodeURIComponent(document.getElementById("uname").value);
                    var screen_category=encodeURIComponent("Vertrag Suchen");
                    var dataenc=encodeURIComponent(data)
                    console.log("data is :"+data);
                    console.log("Settings is : "+settings);
                     $.ajax({
                         type:"GET",
                         url:"/updsearchscreenprofile?uname="+uname+"&saveview="+dataenc+"&screen_category="+screen_category,
                        dataType :"json",
                        accept:"json",
                        cache:false,
                        mimeType:'application/json',
                        beforeSend: function(xhr) {                         
                                    xhr.setRequestHeader("Accept", "application/json");  
                                    xhr.setRequestHeader("Content-Type", "application/json");  
                        }, 
                         success:function(data){
                               document.getElementById("info").innerText=data["msg"];
                               $('#info-message').modal('show');                                                 
                         },
                         error:function(e){ 
                             console.log(e);
                             console.log("I am inside Error Function");
                         }
                     });
                }, 
                 stateLoadCallback: function (settings) 
                 {
                    var o;
                    var uname=encodeURIComponent(document.getElementById("uname").value);
                    var screen_category=encodeURIComponent("Vertrag Suchen");
                    $.ajax( {
                        url: "/searchscreenprofile?uname="+uname+"&screen_category="+screen_category,
                        async: false,
                        dataType: 'json',
                        success: function (json) {
                            o = json;
                        }
                    } );
             
                    return o;
                },

colin

I have been using the below config to save the ordering and visibility of the columns based on the user

I'm not seeing where you're saving that. By default, stateSave only stores the pagination, the table ordering, and the searches - so you would need to add that.

This example here is saving the selected rows, you would need to do something similar for the data that you wish to save.

If that doesn't get you going, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

v3nky

Thank you for comment. What other options I have to save the column order and column visibilty per user on server side ?

colin

That'll be the way to do. You can get/set the current visibility with columns().visible(), and the order with colReorder.order() - you would add that into the stateSave callbacks.

This example here is saving the selected rows, you would need to do something similar for the data that you wish to save.

Just noticed, sorry, that I didn't post that link! Big apologies - here it is: http://live.datatables.net/secukipe/1/edit

Hope that helps,

Colin

v3nky

Thank you feedback again. I am already able to give the user an option to hide/show the columns and reorder the columns. However the state is getting saved locally and whenever the cache of the browser is cleared the whole set up by user about column visibility and order is being erased and setting to default state. Below is the datatable definition I have . I need the the column visibility and order saved per user irrespective of the cache cleared from the browser. Please advise how can I achieve this with below set up.
Your example shows about the rows but I need for columns as in my case rows will get populated dynamically based on user search.

$('#results').DataTable( {
                "scrollX": true,
                 lengthChange: true,
                 "processing": true,
                 "pageLength": 50,
                 "deferRender": true,
                 colReorder: true,   
                 "stateSave": true,
                "stateSaveParams": function (settings, data) {
                   data.search.search = "";
                 },
                "stateSaveCallback": function (settings, data) {
                    var saveview=false;
                    var uname=encodeURIComponent(document.getElementById("uname").value);
                    var screen_category=encodeURIComponent("Vertrag Suchen");
                    var dataenc=encodeURIComponent(data)
                    console.log("data is :"+data);
                    console.log("Settings is : "+settings);
                    if(saveview== true)
                    {
                     $.ajax({
                         type:"GET",
                         url:"/updsearchscreenprofile?uname="+uname+"&saveview="+dataenc+"&screen_category="+screen_category,
                        dataType :"json",
                        accept:"json",
                        cache:false,
                        mimeType:'application/json',
                        beforeSend: function(xhr) {                         
                                    xhr.setRequestHeader("Accept", "application/json");  
                                    xhr.setRequestHeader("Content-Type", "application/json");  
                        }, 
                         success:function(data){
                               document.getElementById("info").innerText=data["msg"];
                               $('#info-message').modal('show');                                                 
                         },
                         error:function(e){ 
                             console.log(e);
                             console.log("I am inside Error Function");
                         }
                     });
                    }
                    saveview=false;
                }, 
                 stateLoadCallback: function (settings) 
                 {
                    var o;
                    var uname=encodeURIComponent(document.getElementById("uname").value);
                    var screen_category=encodeURIComponent("Vertrag Suchen");
                    $.ajax( {
                        url: "/searchscreenprofile?uname="+uname+"&screen_category="+screen_category,
                        async: false,
                        dataType: 'json',
                        success: function (json) {
                            o = json;
                            console.log(o);
                        },
                       error:function(e){   
                         console.log(e);
                         console.log("I am inside Error Function");
                     }
                    } );
             
                    return o;
                },
                "oLanguage": 
                {
                   "sLengthMenu": "Zeige _MENU_ Einträge",
                   "sZeroRecords": "Keine Zeilen gefunden",
                   "sInfo": "Zeilen _START_ bis _END_ von _TOTAL_ angezeigt",
                   "sInfoEmpty": "Zeilen 0 bis 0 von 0 angezeigt",
                   "sSearch": "Filter:",
                    "oPaginate":
                    {
                      "sPrevious": "Vorherige",
                      "sNext": "Nächste",
                    },
                    "processing": "<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate'></span>"
                 },
                  
                dom: 'lBfrtip',
                buttons: [
                          { extend: 'copy', text: 'Kopieren' }, 
                          { extend: 'excel', text: 'Exportieren (xlsx/xls)',title:'Vertrag_Datei_Export',
                            filename: function()
                            {
                             var date = new Date();
                             var n = date.getFullYear() + "" + (date.getMonth()+01) + "" + date.getDate() + "" +  date.getHours() + "" + date.getMinutes() + "" + date.getSeconds();
                                              return 'Vertrag_Datei_Export_' + n;
                            }
                           },
                           { extend: 'csv',charset: 'UTF-8', text: 'Exportieren (csv)',
                             title:'Vertrag_Datei_Export',
                             filename: function()
                             {
                              var date = new Date();
                              var n = date.getFullYear() + "" + (date.getMonth()+01) + "" + date.getDate() + "" +  date.getHours() + "" + date.getMinutes() + "" + date.getSeconds();
                              return 'Vertrag_Datei_Export_' + n;
                             }
                           }, 
                           { extend: 'colvis', text: 'Spaltenauswahl' ,columns: ':not(.noVis)'}
                          ]