Why stateLoadCallback function JSON data not loading the into the Table.

Omniwyse

Getting JSON data from Backend but its not loading.

Ex: If I hide the Column1 and save the state of the tables. While loading the page I am getting the JSON data from backend correctly. But while loading into UI its not loading what ever I am getting from backend JSON.

stateLoadCallback: function (settings,callback) {
        $.ajax( {
            url: extract_url('/rest/load_state'),
            data: {
            loggedInUser : loggedInUser,
            tableName : 'ZonesTable',
            },
            dataType: 'json',
            success: function (json) {
                callback(json);
            }
        } );
    },

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a test case showing the issue please? That looks like it should work okay.

Allan

Omniwyse

First loading time its getting state load json from back end but its not loading properly.
after loading the data again its calling state save with default table state. and that to its calling twice.

Please help me I am totally struck with this.
Thanks .

And I just click on second page then state save function calling 2 times and why?

Omniwyse

This is my editor code

editor = new $.fn.dataTable.Editor( {
        ajax: {
        url: extract_url('/rest/updateType'),
        data: function ( d ) {
            d._csrf = CSRF_TOKEN,
            d.typeName = 'Zones',
            key = Object.keys(d.data)[0];
            d.zoneId = d.data[key].zoneId,
            d.name = d.data[key].name ,
            d.description = d.data[key].description,
            d.status = d.data[key].status
            },
        success: function (response) {
             if (response.status === 'success') {
                    hideErrorMessages();
                    if(response.value != null && response.value.action === 'create'){
                        newRecordCreated = true;
                    }
                    
                    crudOperationPerformed = true;
                    displaySelectedType(response.value.prerequisiteType);
             }else if (response.status === 'error') {
                    hideErrorMessages();
                    $('#zonesDuplicationErrors').html(
                    '<div class="alert alert-warning"><button type="button" class="close" data-dismiss="alert">&times;</button><ul></ul></div>');
                    for (var e in response.value) {
                      $('#zonesDuplicationErrors ul').append('<li>'+ response.value[e] +'</li>');
                    }
                      $("#zonesDuplicationErrors").show();

}
            },
            },
table: "#zones-search-results",
        idSrc:  'zoneId',
        dataType: 'json',
        fields: [ {
                label: "ID :",
                name: "zoneId",
                type:"hidden",
                data :"zoneId"
                
            }, {
                label: "Name :",
                name: "name",
                data :"name",
            }, {
                label: "Description :",
                name: "description",
                data :"description"
            },
            {
                label: "Status :",
                name: "status",
                data : status,
                type: "select",
            }
        ]
    } );

This is my datatables code.

var table = $('#zones-search-results').DataTable( {
        dom: 'lBfrtip',
//      "bDestroy": true,
        stateSave: true,
        
        stateDuration:-1,
        responsive: true,
        colReorder: true,
        
        "buttons": [
           {
                extend: 'collection',
                text: 'Export',
                buttons: [
    {
     extend: 'csvHtml5', text: 'Export To CSV', filename:'Customer CSV Data',action: newexportaction,
exportOptions: {
                             columns: ':visible'
                     }
},{
     extend: 'pdfHtml5', text: 'Export To PDF', filename:'Customer PDF Data',action: newexportaction,
exportOptions: {
                             columns: ':visible'
                     }
}
                ],
     },
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor },
          {extend:'colvis',text: 'Show/Hide Column',activate: 'mouseover'}
        ],
        
        "processing": true,
        "serverSide": true,
        "searching": false,
        "length": 10,
        "ajax": {
    "url": extract_url('/rest/zones'),
    data: function ( d ) {
        var sortingColumn=d.order[0].column;
        var newRecord = '';
        if(crudOperationPerformed == true){
            sortingColumn = '';
        }
        if(newRecordCreated == true){
            newRecord = 'create';
        }
        var sortingOrder=d.order[0].dir;
        d.status=status,
        d.search=search,
        d.newRecord = newRecord,
        d.orderColumn=sortingColumn,
        d.order=sortingOrder;
        delete d.columns;
        crudOperationPerformed = false;
        newRecordCreated = false;
    }
  },
     columns: [
        {data: "zoneId",
        },
         {data: "name",
        },
         {data: "description",
        },
        {data: "status",
        },
       
    ],
"stateSaveCallback": function (settings, data) {
    
//          for (const column in data.columns) { //I do not want to save the search criteria to the database. It could make the string too long
//               delete data.columns[column].search;
//              }
//     delete data.select;
 var tableListJSON = {};
 var tableListJSON = JSON.stringify(data);
    $.ajax( {
      "url": extract_url('/rest/state_save'),
        data: {
            
            tableList : tableListJSON,
            tableName : 'ZonesTable',
            loggedInUser : loggedInUser,
                "_csrf": CSRF_TOKEN
            },
      "dataType": "json",
      "type": "POST",
      "success": function () {}
    } );
  },
stateLoadCallback: function (settings,callback) {
        $.ajax( {
            url: extract_url('/rest/load_state'),
            data: {
            loggedInUser : loggedInUser,
            tableName : 'ZonesTable',
            },
            dataType: 'json',
            success: function (json) {
                if(json.status === 'success'){
                    callback( json );
                }else{
                    table.state.save();
                }
            }
//            success: function (json) {
//                callback(json);
//            },
//          error : function(){
//              //  table.state.clear();
//               //window.location.reload();
//          }
        } );
    },
stateSaveParams: function (settings, data) {
            delete data.search;
  },



select: true
 } );

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

I'm not seeing anything that stands out as a problem to me there. I really would need a test case that I can step through with the debugger to understand why it isn't working.

Allan

OnLog

I had the same problem and added stateDuration: 0 to DataTables:

$('#' + dataTableID_description + subMenuID).DataTable({
                    columns: colsTable,
                    idSrc: modelKeyDynamic[subMenuID],
                    stateSave: true,
                    keys: true,
                    keys: keys,
                    stateDuration: 0,

allan

That would be the same as disabling state saving.

If you are able to give me a link to a page showing the issue, I can look into it.

Allan