在Angular中更新Datatable需要手动调用Datatable的API方法进行刷新。可以在组件中使用ViewChild来获取Datatable的实例,然后使用addRow、removeRow或manageRow方法来添加、删除或编辑行,最后调用Datatable的draw方法来重新渲染。
示例代码如下:
HTML模板文件:
ID
Name
Age
Actions
{{item.id}}
{{item.name}}
{{item.age}}
组件代码:
import { Component, ViewChild } from '@angular/core';
import * as $ from 'jquery';
import 'datatables.net';
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.css']
})
export class DatatableComponent {
@ViewChild('myTable') table;
items = [
{ id: 1, name: 'John', age: 28 },
{ id: 2, name: 'Peter', age: 35 },
{ id: 3, name: 'Mary', age: 31 }
];
ngAfterViewInit() {
$(this.table.nativeElement).DataTable();
}
edit(item) {
// Code to edit the item goes here.
this.table.nativeElement.api().row("#" + item.id).data(item);
this.table.nativeElement.api().draw();
}
delete(item) {
// Code to delete the item goes here.
this.table.nativeElement.api().row("#" + item.id).remove().draw();
}
add(item) {
// Code to add the item goes here.
this.table.nativeElement.api().row.add(item).draw();
}
}
上一篇:Angular中添加相同值的行。
下一篇:Angular中提交按钮的问题