Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2022

  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 Posts: 11Questions: 1Answers: 0

  August 2022 edited August 2022

  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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  August 2022

  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