I'm trying to implement the Edit, New and Delete buttons to an Editor datatable i've created in an angular. Basicly i populate the editor through an API call on my service and now i want to manipulate this data and pass it back. But i lack experience with angular to really find the solution to my problem. I am at this state:
Component.ts file:
ngOnInit() {
//this.dataTable = $(this.table.nativeElement);
// this.dataTable.dataTable();
this.survService.getClientData(this.jwt).subscribe(
data => {
this.items = data;
this.loadOrganisations(),
console.error();
console.log(this.items);
});
}
public loadOrganisations(): void{
if (this.tableWidget) {
this.tableWidget.destroy(); // essentially refreshes the table
// you can also remove all rows and add new
this.tableWidget.clear().rows.add(this.items).draw();
}
console.log(this.items);
let editor = new ($.fn.DataTable as any).Editor({
ajax:{
edit:{
contentType:'application/json',
data:function (d) {
var newdata;
$.each(d.data, function (key, value) {
newdata = this.survService.client
console.log("ajax data new data...:" + newdata);
});
console.log("ajax data new data:" + newdata);
// // newdata = newdata.replace(/\\n/g, "\\n")
// // .replace(/\\'/g, "\\'")
// // .replace(/\\"/g, '\\"')
// // .replace(/\\&/g, "\\&")
// // .replace(/\\r/g, "\\r")
// // .replace(/\\t/g, "\\t")
// // .replace(/\\b/g, "\\b")
// // .replace(/\\f/g, "\\f");
// // newdata = newdata.replace(/[\u0000-\u0019]+/g,"");
return newdata;
},
success: function (data) { $('#dataTables').dataTable().api().ajax.reload(); },
},
},
table: '#dataTables',
fields:[{
label:"GUID",
name:"guid",
},{
label:"Client Id",
name:"clientId",
},{
label:"Organization Name",
name:"clientName",
},{
label:"Address",
name:"address",
},{
label:"Email",
name:"email",
},{
label:"Responsible Person",
name:"responsiblePersonName",
},{
label:"Work Flow Code",
name:"workFlowCode",
}]
});
let tableOptions: any = {
table: '#dataTables',
data: this.items,
dom: 'Bfrtip',
select: true,
columns: [
//{ title: 'GUID', data: 'guid' },
{ title: 'Client Id', data: 'clientId' },
{ title: 'Organization Name', data: 'clientName' },
{ title: 'Address', data: 'address' },
{ title: 'Email', data: 'email' },
{ title: 'Responsible Person', data:'responsiblePersonName' },
{ title: 'Work Flow Code', data: 'workFlowCode' }
],
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
],
}
this.backofficeTable = $(this.el.nativeElement.querySelector('table'));
this.tableWidget = this.backofficeTable.DataTable(tableOptions);
this.tableWidget.on('select', (e, dt, type, indexes) => {
// // I DIDN'T TRY THIS IN HERE...Just debug it and check the best way to emit an actual object
this.organisationSelected.emit(this.items[indexes[0]]);
});
}
Service.ts file:
getClientData(jwt): Observable<any>{
this.headers = this.headers.set('Authorization', jwt);
return this.httpClient.get<Orgnanisations[]>(
environment.surveyApiUrl + 'api/client/',
{ headers:this.headers,
responseType: 'json' }
);
}
i get this error when i press one of the buttons:
'core.js:1673 ERROR TypeError: Cannot read property 'oFeatures' of undefined'
Any help is more than welcomed.