State load not working properly.

Madhavi Bhimisetty

Suppose I was in 2nd page and I perform Edit for one of the row using datatables editor.
After updating successfully its loading the state which I saved from my backed and load the data but again its calling state save with start : 0 . Actually it should be Start : 10 . And same problem with Column hide and show also first its loading properly and immediatly its calling state save with showing all column.Actually I have one of the column. Pls help me.

allan

When you update, are you refreshing the whole page? That isn't required - the response from the server to the Editor request should contain the information that Editor needs to update the target row. There shouldn't be any need to do a state load at that point.

Allan

Madhavi Bhimisetty

Okay.

How to write a code to update only that perticular row.

this is how I am doing currently.

function triggerZonesSearch() {
    
    //restZonesDataTable();
    var key;
    
    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",
            }
        ]

    } );
    
    
    editor.on( 'preSubmit', function ( e, o, action ) {
        if ( action !== 'remove' ) {
            var zoneName = this.field( 'name' );
 
            if ( ! zoneName.isMultiValue() ) {
                if ( ! zoneName.val() ) {
                    zoneName.error( 'Zone name must be given' );
                }
                 
                if ( zoneName.val().length >= 50 ) {
                    zoneName.error( 'The zone name length must be less that 50 characters' );
                }
            }
 
            if ( this.inError() ) {
                return false;
            }
        }
    } );
    
    
editor.dependent( 'status', function (val, data, callback) {
    var test = new Array();


for(var a=0;a < statusList.length;a++){

            obj= { "label" : statusList[a], "value" : statusList[a]};
            test.push(obj);
        }
        editor.field('status').update(test);
        callback(test);
});


     $('#loading').hide();
     $('.customersTitle').show();
     var search= $('#zoneSearch').val();
    var status= $('#zonesStatus-filter').val();
var loggedInUser= $('#loggedInUser').val();

    var table = $('#zones-search-results').DataTable( {
        dom: 'lBfrtip',
        "bDestroy": true,
        stateSave: true,
        "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',
            },
            async: false,
            dataType: 'json',
            success: function (json) {
                callback( json );
            },
            error : function(){
                //  table.state.clear();
                 //window.location.reload();
            }
        } );
    },
stateSaveParams: function (settings, data) {
            delete data.search;
  },

        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",
        },
       
    ],

select: true

        } );


$('#zones-search-results tbody').on('click', 'tr', function () {
        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        } else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    });




$('#resetZonePreference').click( function (e) {
        e.preventDefault();
table.state.clear();
window.location.reload();
    } );


}

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

allan

Editor expects the data from the server back in the format described here.

If you can't send the data back in that format, use ajax as a function to make your own Ajax call, and then transform your own data format into Editor's before calling the callback function.

Regards,
Allan