DataTable not refreshing after the edit

DataTable not refreshing after the edit

Jain BazaarJain Bazaar Posts: 1Questions: 1Answers: 0

My datatable is not refereshing after I make the edit. My database is getting changed. Server is replying with the data parameter defining the data object for the edited row. Couldnt identify the issue. Plz help.

here goes my whole script

/* Formatting function for row details */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
        '<td>Source:</td>' +
        '<td>' + d.referred_by + '</td>' +
        '<td>Address:</td>' +
        '<td>' + d.lead_address + '</td>' +
       
    '</tr>' +
    '<tr>' +
    '<td>Status</td>' +
    '<td>' + d.lead_status + '</td>' +
        '<td>Remarks:</td>' +
        '<td>' + d.other_info + '</td>' +
    '</tr>' +
    '<tr>'+
    '<td>Presented By:</td>' +
    '<td>' + d.other_info2 + '</td>' +
    '<td></td>' +
    '<td></td>' +
'</tr>' +
    '</table>';
}
var editor;
$(document).ready(function() {
    
     var editor = new $.fn.dataTable.Editor( {
        ajax:  '/testing/editLeadsJson',
        table: '#leads',
        idSrc: 'lead_id',
        fields: [
            { label: 'ID', name: 'lead_id' },
            { label: 'NAME', name: 'lead_name' },
            { label: 'CONTACT',  name: 'lead_number1'  },
            { label: 'AREA',  name: 'lead_area'  },
            { label: 'BUSINESS NAME ',  name: 'lead_buss_name'  },
            { label: 'NATURE OF BUSINESS',  name: 'lead_category'  },
            { label: 'APPOINTMENT-DATE',  name: 'app_date'  },
            { label: 'APPOINTMENT-TIME',  name: 'app_time'  },
            { label: 'LEAD ASSIGNED',  name: 'agent_assigned'  },
            { label: 'Agent',  name: 'lead_telecaller'  },
            { label: 'SOURCE',  name: 'referred_by'  },
            { label: 'Address',  name: 'lead_address'  },
            { label: 'Remarks',  name: 'other_info'  },
            { label: 'Status',  name: 'lead_status'  },
            { label: 'Presented by',  name: 'other_info2'  }
            // etc
        ]
    } ); 
    // Activate an inline edit on click of a table cell
           $('#leads').on( 'dblclick', 'tbody td.editable', function (e) {
        editor.inline( this, {
            submit: 'allIfChanged',
            submitOnBlur: true
        } );
    } );
     var table = $('#leads').DataTable({
         ajax: {
                "url": '/testing/readLeadsJson',
                "dataSrc": ""
            }, 
         stateSave: true,
         select: {
                style:    'multi',
                selector: 'td:not(:first-child)'
            }, 
         columns: [ 
         {
            className:      'details-control',
            orderable:      false,
            data:           null,
            defaultContent: ''
         },
         {
             className: 'select-checkbox',
             orderable: false,
             data:           null,
             defaultContent: ''
         },
         { 
         "data" : "lead_id",
            "className" : "text-center"
        },
        {
            "data" : "lead_name",
            "className" : "text-center editable"
        },
        {
            "data" : "lead_number1",
            "className" : "text-center editable"
        },
        {
            "data" : "lead_area",
            "className" : "text-center editable"
        },
        {
            "data" : "lead_buss_name",
            "className" : "text-center editable"
        },
        {
            "data" : "lead_category",
            "className" : "text-center editable"
        },
        {
            "data" : "app_date",
            "className" : "text-center editable"
        },
        {
            "data" : "app_time",
            "className" : "text-center editable"
        },
        {
            "data" : "agent_assigned",
            "className" : "text-center editable"
        },
        {
            "data" : "lead_telecaller",
            "className" : "text-center editable"
        },
         { 
             "data": "referred_by",
             "visible": false,
             "searchable": true
         },
         { 
             "data": "lead_address",
             "visible": false,
             "searchable": true
         },
         { 
             "data": "other_info",
             "visible": false,
             "searchable": true
         },
         { 
             "data": "other_info2",
             "visible": false,
             "searchable": true
         }
         ] ,
         pageLength: 50,
         orderCellsTop: true,
         fixedHeader: true,
         lengthMenu: [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, "All"]],
         dom: 'Bfirtlip',
         buttons: [
             'excel', 'pdf', 'copy', 
             {
                text: 'Expand All',
                action: function(){
                     // Enumerate all rows
                     table.rows().every(function(){
                         // If row has details collapsed
                         if(!this.child.isShown()){
                             // Open this row
                             this.child(format(this.data())).show();
                             $(this.node()).addClass('shown');
                         }
                     });
                }
             },
             {
                text: 'Collapse All',
                action: function(){
                     // Enumerate all rows
                     table.rows().every(function(){
                         // If row has details expanded
                         if(this.child.isShown()){
                             // Collapse row details
                             this.child.hide();
                             $(this.node()).removeClass('shown');
                         }
                     });
                 }
             },
             { extend: "edit",   editor: editor }
         ]
    });
     
     // Show all child nodes
        table.rows().every( function () {
            this.child(format(this.data())).show();
            this.nodes().to$().addClass('shown');
        });  
     // Add event listener for opening and closing details
        $('#leads tbody').on('click', 'td.details-control', function () {
           var tr = $(this).closest('tr');
           var row = table.row( tr );
      
           if ( row.child.isShown() ) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
           }
           else {
              // Open this row
              row.child( format(row.data()) ).show();
              tr.addClass('shown');
           }
        } );
     // Restore state
        var state = table.state.loaded();
        if ( state ) {
          table.columns().eq( 0 ).each( function ( colIdx ) {
            var colSearch = state.columns[colIdx].search;
            
            if ( colSearch.search ) {
              $( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
            }
          } );
        }
} );

The response from the server is

[{"data":[{"action":null,"agent_assigned":"","app_date":"23 dec","app_time":"10","last_action_at":null,"last_action_by":null,"lead_address":"ch","lead_area":"wsx","lead_buss_name":"M C","lead_category":"Insurance Consultants","lead_id":1,"lead_name":"test","lead_number1":"123","lead_status":null,"lead_telecaller":"Navin","other_info":"test","other_info2":null,"referred_by":"Vendors "},{"action":null,"agent_assigned":null,"app_date":"Call Bak - Jan'19","app_time":null,"last_action_at":null,"last_action_by":null,"lead_address":"No 480, NSC Boss Road, Kondithope-Sowcarpet, Chennai - 600001, Near Amman Temple","lead_area":"Sowcarpet","lead_buss_name":"Jain Jewellery","lead_category":"Jewellers","lead_id":2,"lead_name":null,"lead_number1":"9994790708","lead_status":null,"lead_telecaller":"Navin","other_info":null,"other_info2":null,"referred_by":"Jain Vendors "},{"action":null,"agent_assigned":null,"app_date":"Shop Closed","app_time":null,"last_action_at":null,"last_action_by":null,"lead_address":"Nirmal Plaza, Shop No 4, Ground Floor, 159, Mint Street, Sowcarpet, Chennai - 600001, Near Kakada Sweets","lead_area":"Sowcarpet","lead_buss_name":"Jain Silver","lead_category":"Jewellers\/Silver","lead_id":3,"lead_name":null,"lead_number1":"25360510\/9176351688","lead_status":null,"lead_telecaller":"Navin","other_info":null,"other_info2":null,"referred_by":"Jain Vendors "}]}]

Answers

  • allanallan Posts: 48,667Questions: 1Answers: 7,070 Site admin

    Try adding rowId: 'lead_id' to your DataTable initialisation please? It shouldn't be required, but it might help.

    If that doesn't fix it, can you send me a link to the page showing the issue so I can check it out?

    Thanks,
    Allan

Sign In or Register to comment.