DataTable not refreshing after the edit

DataTable not refreshing after the edit

Jain BazaarJain Bazaar Posts: 2Questions: 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: 61,446Questions: 1Answers: 10,054 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

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

    I have added rowId to datatable initialization. but that didnt work. The link to the page is http://testing-env.gfdcikecek.us-east-2.elasticbeanstalk.com/readLeads. The login details is 1234 and 123.

    Also, expanding all child rows on initialization, column search has stopped working after adding inline editor.

    Please help

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited January 2019

    Hi,

    Thanks for the link. I believe the issue with the table not updating after edit is that the JSON sent back by the server does not match what Editor expects.

    It has an outer array which I missed before:

    [{
        "data": [{
            "action": null,
            "agent_assigned": "",
            "app_date": "23 dec",
            "app_time": "10",
            "last_action_at": null,
            "last_action_by": "test",
            "lead_address": "ch",
            "lead_area": "wsx",
            "lead_buss_name": "M C",
            "lead_category": "Insurance Consultants",
            "lead_id": 1,
            "lead_name": "test1",
            "lead_number1": "1234",
            "lead_status": "",
            "lead_telecaller": "Navin",
            "other_info": "test",
            "other_info2": "",
            "referred_by": "Vendors "
        }, {
    

    It should be:

    {
        "data": [{
            "action": null,
            "agent_assigned": "",
            "app_date": "23 dec",
            "app_time": "10",
            "last_action_at": null,
            "last_action_by": "test",
            "lead_address": "ch",
            "lead_area": "wsx",
            "lead_buss_name": "M C",
            "lead_category": "Insurance Consultants",
            "lead_id": 1,
            "lead_name": "test1",
            "lead_number1": "1234",
            "lead_status": "",
            "lead_telecaller": "Navin",
            "other_info": "test",
            "other_info2": "",
            "referred_by": "Vendors "
        }, {
    

    Also note that your edit is returning everything not just the row that was edited, which will impact performance.

    Also, expanding all child rows on initialization, column search has stopped working after adding inline editor.

    Its currently commented out:

         /* // Show all child nodes
            table.rows().every( function () {
                this.child(format(this.data())).show();
                this.nodes().to$().addClass('shown');
            });   */
    

    That code needs to go in initComplete to execute once the Ajax data has been loaded.

    Allan

This discussion has been closed.