Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82273

Configure Edit, New, Delete buttons on Editor datatable with API calls in angular 6 project.

$
0
0

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.


Viewing all articles
Browse latest Browse all 82273

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>