help with datatable savestate callback

ty105

i am trying to use the save state call back to save the state in my data base, trying to get the callback to fire though and i cant seem to get it working

    function initDataTable(){
        //$('.table-cpf-datatable').colResizable();
        // initiate datatables on lead search table
        var oTable = $('#table-accounts').DataTable({
            stateSave: true,
            "scrollX": true,
            "autoWidth": false,
            iCookieDuration: 0, //60*60*24, // 1 day
"stateSaveCallback": function (settings, data) {
    console.log(settings, data);
    // Send an Ajax request to the server with the state object
    $.ajax( {
      "url": "/state_save",
      "data": data,
      "dataType": "json",
      "type": "POST",
      "success": function () {}
    } );
  },
            //"iDisplayStart": 0,
            //"iDisplayLength": 10,
            "iDisplayLength": -1,
            //"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
            "oLanguage": {
                "sSearch": "Narrow Search: "//,
                //"sEmptyTable": "No lead campaign data found"
            },
            "columnDefs":[{
            // Sort column 1 (formatted date) by column 6 (hidden seconds)
            "orderData":[ 3 ],   "targets": [ 4 ]
            },
            { "type": "natural", targets: 3 }],
            "aoColumns": [
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "width":"170px"},
                {"bVisible": false, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": true, "min-width":"45px"},
                {"bVisible": false, "min-width":"45px"}
                ],
            "aaSorting": [],
            "dom": "RJ<'dataTables_info_top'i><'row'<'dataTables_control'l><'dataTables_control'Cf>r>t",
            //"sDom": "<'row'<'col-xs-6'i><'col-xs-6'f>r>t<'row'<'col-xs-6'><'col-xs-6'>>",
            //"dom": 'R C<"clear">lfrtip',
            "oColReorder": {
            "aiOrder": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
            },
            "ColResize":{},
            "oColVis": {
                "buttonText": "<i class='fa fa-columns'>",
                "aiExclude": [ 1, 3 ],
                "sAlign": "right",
                "label": function ( index, title, th ) {
                    switch (index){
                        case 0: return "left Buttons";
                            break;
                        case 16: return "Right Buttons";
                            break;
                        default: return title;
                    
                    }
                }
            }
        });
    $('#page-target').on('click', '#trigger-table-reset', function(){
        if (confirm('Are you sure you want to reset the formatting of your table to default?')) {
            oTable.state.clear();
            window.location.reload();
        } else {
            // Do nothing!
        }

}); 

i have also just tried to log a value into the console inside of the function call but nothing seems to be running, its not firing.

any help is much appreciated, thank you!

ty105

please if anyone knows anything about this help me out, its holding up an entire project

alexvremja

well

"url": "/state_save",

seems not correct: you have to put the url of the saving page

"url": "/state_save.php",
or
"url": "/state_save.asp",

according to your serverside language.

Then you have to write the code to handle and save into a database table all the settings.

Again you have to do the same with LoadStateCallBack, since if you save only is useless.:

Furthermore you have to change "stateDuration" since default setting is 2 hours only
Personally
I was not interested to save text filter but only column position and visibility, so to reduce payload I removed all the text filter state

set duration of state saved to 1 year
"stateDuration": 60*60*24*365,

remove general search and all column search (for (var ii=0.....

  "stateSaveParams": function (settings, data) {
        delete data.search;
        for (var ii=0;ii<data.columns.length;ii++)
        {delete data.columns[ii].search};
      },

Since I have many Tables I want to save state..I added a Table Parameter

  "stateSaveCallback": function (settings, data) {
        var prmt={Table:tbl};
        $.extend(data,prmt);
        $.ajax( {
          "url": "../ajax/DataTableState.asp",
          "data": data,
          "dataType": "json",
          "type": "GET",
          "success": function () {}
        } );
      } ,

I used same page to load and save state but you can use 2 different..

    "stateLoadCallback": function (settings) {
            var o;
            $.ajax( {
              "url": "../ajax/DataTableState.asp?Table="+tbl,
              "async": false,
              "dataType": "json",
              "success": function (json) {
                o = json;
              }
            } );
            return o;
        }, 

All Together:

    table=$('#dataTable').DataTable( {
    "processing": true,
    "serverSide": true,
    "buttons": [
        'columnsToggle',
        'csv',
        'copy'
    ],
    "stateLoadCallback": function (settings) {
        var o;
        $.ajax( {
          "url": "../ajax/DataTableState.asp?Table=<%=T%>",
          "async": false,
          "dataType": "json",
          "success": function (json) {
            o = json;
          }
        } );
        return o;
    },
    "stateDuration": 60*60*24*365,
    "stateSave": true,
    "stateSaveParams": function (settings, data) {
        delete data.search;
        for (var ii=0;ii<data.columns.length;ii++)
        {delete data.columns[ii].search};
      },

    "stateSaveCallback": function (settings, data) {
        var prmt={Table:'<%=T%>'};
        $.extend(data,prmt);
        $.ajax( {
          "url": "../ajax/DataTableState.asp",
          "data": data,
          "dataType": "json",
          "type": "GET",
          "success": function () {}
        } );
      },

    "dom": 'BRrtiS<"bottom">f<"clear">',
    "pagination":false,
    "scrollY": wh+"px",
    "scrollX": true,
    "deferRender": true,
    "displayStart":0,
   // "paging":false,
   "ajax": 
    {
        "url": "../ajax/WidgetsRetrieve.asp",
        "data": function (d) {
            d.myKey="<%=T%>";
        }
    },
    "columns": [<%=tcolumns%>]
});

ty105

thank you for the help! you are awesome