DataTable not refreshing after the edit
DataTable not refreshing after the edit
Jain 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 "}]}]
This discussion has been closed.
Answers
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
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
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:
It should be:
Also note that your edit is returning everything not just the row that was edited, which will impact performance.
Its currently commented out:
That code needs to go in
initCompleteto execute once the Ajax data has been loaded.Allan