Add delete event inside delete button to each row of Datatables on Angular and add background-color into button

user_13678374 0
Viewed 1652

I am able to put a button inside each row of data tables but the button doesn't have any function, and I didn't know how to add delete event to that button. can someone help me? hope you give me the demo too ;) *ps: also, how to put background-color on print, export button. className : red(on TS) and .red{ background-color : red;}(on CSS) didn't work out :/ *another ps : i'm using datatables.net

TS File

products: any = (data as any).default;
ngOnInit(): void {
this.dtOptions = {
 ajax: {
        url: '',
        type: 'GET',
        dataType: 'json',
      },

      columns: [
        {
          title: 'ID',
          data: 'id',
        },
        {
          title: 'Name',
          data: 'name',
        },
        {
          title: 'Gender',
          data: 'gender',
        },
        {
          title: 'Option',
          data: null,
          defaultContent:
            '<button class="btn-delete type="button">Delete</button>',
          targets: -1,
        },

       ],
      dom: 'Bfrtip',
      buttons: [
        { extend: 'excel', text: 'Export' },
        {
          text: '<i class="fa fa-files-o"></i>',
          action: function (e, dt, node, config) {
            dt.ajax.reload();
          },
        },
        {
          extend: 'print',
          text: 'Print',
        },
      ],
    };
}

html

<table
  datatable
  [dtOptions]="dtOptions"
  class="mc row-border hover">
</table>
angular datatables jquery ajax javascript
1 Answers

You can check this Demo

you need to rerender after delete process. You can add button like below and give function to it.

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let person of persons">
      <td>{{ person.id }}</td>
      <td>{{ person.firstName }}</td>
      <td>{{ person.lastName }}</td>
      <td><button class="btn-delete" (click)="deleterow(person)">Remove</button> </td>
    </tr>
    <tr *ngIf="persons?.length == 0">
      <td colspan="4" class="no-data-available">No data!</td>
    </tr>
  </tbody>
</table>

in component you need rerender function

 deleterow(person){
    console.log(person);
    //here do delete event
    const that = this;
    this.rerender()
 }
 rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.destroy();
      this.dtTrigger.next();
    });
 }

and change your afterinit with

ngAfterViewInit(): void {
    this.dtTrigger.next();
}
user_25762540
Related