I am using nested datatable to show list of plaints for a department. By default all category plaints are fetched from the database. This is working fine.
When I am changing the dropdown and selecting other category, the datatable doesn't get loaded with new values. On the browser console getting following error.
JS code to get data from database:
//get plaint data from database
function getComplaintData(){
var cat = $("#mainCategory").val();
$.ajax({
url: 'getComplaintData',
type: 'POST',
data:{ "userLogged":"admin","category":cat},
success: function (data) {
assignToEventColumns(data); //bind to datatable
bindDetails(); //bind to nested table of datatable
}
});
}
$(function(){
getComplaintData();
// Add event listener for opening and closing details
});
var table;
//assign plaint data to datatable
function assignToEventColumns(response){
var plaintId,plaintDt;
table = $('#dtMyComplaints').DataTable({
destroy: true,
"processing": true,
"data":response.data,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"render": function () {
return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
},
"width":"20px"
},
{ "data": "headerId" },
{ "data": "openingDt",
render: function ( data, type, row ) {
return formatDate(data);
}
},
{ "data": "catName" },
{ "data": "itemName" },
{ "data": "workList.0.remarks"},
{ "data":"status",
render:function(data,type,row){
return data=="C"?"Closed":"In-Progress";
}
},
{
"data": null,
"defaultContent":'',
"render": function ( data, type, row ) {
plaintId = data.headerId;
plaintDt = formatDate(data.openingDt);
if(data.status=="C"){
return "";
}else{
return "<p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit' data-plaintid='"+plaintId +"' data-plaintdt ='"+plaintDt+"' ><span class='glyphicon glyphicon-pencil'></span></button></p>";
}
}
},
{"data":"item",visible:false,targets:[8]},
{"data":"category",visible:false}
]
});
}
Response from database is of format :
{"data":[{"empid":"A1359","status":"A","catName":"CARPENTRY","itemName":"Door Repair","headerId":3,"quarter":4,"item":4,"category":4,"priority":4,"openingDt":"May 15, 2018 3:48:18 PM","workList":[{"id":4,"headerId":3,"remarks":"mesh on front door","updatedBy":"admin","updatedDt":"May 15, 2018 3:48:18 PM"},{"id":5,"headerId":3,"remarks":"assigned to Vikas for further processing","assignedTo":"B3007","updatedBy":"admin","updatedDt":"May 16, 2018 12:41:58 PM"},{"id":6,"headerId":3,"remarks":"for further processing","assignedTo":"B3007","updatedBy":"admin","updatedDt":"May 16, 2018 12:42:44 PM"},{"id":7,"headerId":3,"remarks":"test edit","assignedTo":"B1179","updatedBy":"admin","updatedDt":"May 16, 2018 12:43:10 PM"},{"id":8,"headerId":3,"remarks":"test edit","assignedTo":"B2874","updatedBy":"admin","updatedDt":"May 16, 2018 12:45:06 PM"},{"id":9,"headerId":3,"remarks":"test","assignedTo":"B2008","updatedBy":"admin","updatedDt":"May 16, 2018 12:46:33 PM"},{"id":10,"headerId":3,"remarks":"test closing Closing the plaint!","updatedBy":"admin","updatedDt":"May 16, 2018 2:08:25 PM"}]},{"empid":"A1439","status":"A","catName":"WATER","itemName":"Pipe leakage","headerId":2,"quarter":3,"item":3,"category":2,"priority":2,"openingDt":"May 4, 2018 8:12:44 AM","workList":[{"id":2,"headerId":2,"remarks":"Leakage in Bathroom Pipe","updatedBy":"admin","updatedDt":"May 4, 2018 8:15:28 AM"},{"id":3,"headerId":2,"remarks":"Started working - Plumber will arrive by today evening","assignedTo":"C4224","updatedBy":"admin","updatedDt":"May 4, 2018 8:16:32 AM"}]},{"empid":"A1359","status":"C","catName":"ELECTRICAL","itemName":"Bulb","headerId":1,"quarter":1,"item":1,"category":1,"priority":3,"openingDt":"May 1, 2018 3:39:07 PM","workList":[{"id":1,"headerId":1,"remarks":"Bulb not woking","updatedBy":"A1359","updatedDt":"May 1, 2018 3:41:44 PM"}]}]}
I am using nested datatable to show list of plaints for a department. By default all category plaints are fetched from the database. This is working fine.
When I am changing the dropdown and selecting other category, the datatable doesn't get loaded with new values. On the browser console getting following error.
JS code to get data from database:
//get plaint data from database
function getComplaintData(){
var cat = $("#mainCategory").val();
$.ajax({
url: 'getComplaintData',
type: 'POST',
data:{ "userLogged":"admin","category":cat},
success: function (data) {
assignToEventColumns(data); //bind to datatable
bindDetails(); //bind to nested table of datatable
}
});
}
$(function(){
getComplaintData();
// Add event listener for opening and closing details
});
var table;
//assign plaint data to datatable
function assignToEventColumns(response){
var plaintId,plaintDt;
table = $('#dtMyComplaints').DataTable({
destroy: true,
"processing": true,
"data":response.data,
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
"render": function () {
return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
},
"width":"20px"
},
{ "data": "headerId" },
{ "data": "openingDt",
render: function ( data, type, row ) {
return formatDate(data);
}
},
{ "data": "catName" },
{ "data": "itemName" },
{ "data": "workList.0.remarks"},
{ "data":"status",
render:function(data,type,row){
return data=="C"?"Closed":"In-Progress";
}
},
{
"data": null,
"defaultContent":'',
"render": function ( data, type, row ) {
plaintId = data.headerId;
plaintDt = formatDate(data.openingDt);
if(data.status=="C"){
return "";
}else{
return "<p data-placement='top' data-toggle='tooltip' title='Edit'><button class='btn btn-primary btn-xs' data-title='Edit' data-toggle='modal' data-target='#edit' data-plaintid='"+plaintId +"' data-plaintdt ='"+plaintDt+"' ><span class='glyphicon glyphicon-pencil'></span></button></p>";
}
}
},
{"data":"item",visible:false,targets:[8]},
{"data":"category",visible:false}
]
});
}
Response from database is of format :
{"data":[{"empid":"A1359","status":"A","catName":"CARPENTRY","itemName":"Door Repair","headerId":3,"quarter":4,"item":4,"category":4,"priority":4,"openingDt":"May 15, 2018 3:48:18 PM","workList":[{"id":4,"headerId":3,"remarks":"mesh on front door","updatedBy":"admin","updatedDt":"May 15, 2018 3:48:18 PM"},{"id":5,"headerId":3,"remarks":"assigned to Vikas for further processing","assignedTo":"B3007","updatedBy":"admin","updatedDt":"May 16, 2018 12:41:58 PM"},{"id":6,"headerId":3,"remarks":"for further processing","assignedTo":"B3007","updatedBy":"admin","updatedDt":"May 16, 2018 12:42:44 PM"},{"id":7,"headerId":3,"remarks":"test edit","assignedTo":"B1179","updatedBy":"admin","updatedDt":"May 16, 2018 12:43:10 PM"},{"id":8,"headerId":3,"remarks":"test edit","assignedTo":"B2874","updatedBy":"admin","updatedDt":"May 16, 2018 12:45:06 PM"},{"id":9,"headerId":3,"remarks":"test","assignedTo":"B2008","updatedBy":"admin","updatedDt":"May 16, 2018 12:46:33 PM"},{"id":10,"headerId":3,"remarks":"test closing Closing the plaint!","updatedBy":"admin","updatedDt":"May 16, 2018 2:08:25 PM"}]},{"empid":"A1439","status":"A","catName":"WATER","itemName":"Pipe leakage","headerId":2,"quarter":3,"item":3,"category":2,"priority":2,"openingDt":"May 4, 2018 8:12:44 AM","workList":[{"id":2,"headerId":2,"remarks":"Leakage in Bathroom Pipe","updatedBy":"admin","updatedDt":"May 4, 2018 8:15:28 AM"},{"id":3,"headerId":2,"remarks":"Started working - Plumber will arrive by today evening","assignedTo":"C4224","updatedBy":"admin","updatedDt":"May 4, 2018 8:16:32 AM"}]},{"empid":"A1359","status":"C","catName":"ELECTRICAL","itemName":"Bulb","headerId":1,"quarter":1,"item":1,"category":1,"priority":3,"openingDt":"May 1, 2018 3:39:07 PM","workList":[{"id":1,"headerId":1,"remarks":"Bulb not woking","updatedBy":"A1359","updatedDt":"May 1, 2018 3:41:44 PM"}]}]}
- Please do a search here for typeerror cannot read property of undefined. Surely one of the hundreds of existing posts can help you figure this out. – Ken White Commented May 23, 2018 at 17:53
1 Answer
Reset to default 3The datatable needed to be destroyed if existed.
if (mytable !== null ) {
$('#dtMyComplaints').DataTable().destroy();
mytable = null;
// empty in case the columns change
$('#dtMyComplaints').empty();
}
then the code to create a datatable.
table = $('#dtMyComplaints').DataTable({ ......});