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>
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();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With