首先,确保已安装使用的表格库,例如ng2-datatable或ngx-datatable。
然后,安装Angular材料:
npm install --save @angular/material @angular/cdk
在NgModule中导入并导出MatPaginatorModule:
import { MatPaginatorModule } from '@angular/material';
@NgModule({ imports: [MatPaginatorModule], exports: [MatPaginatorModule], })
在表格组件中,导入MatPaginator和MatSort:
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
定义表格和分页等变量:
dataSource: MatTableDataSource
在ngOnInit中,初始化表格和分页:
this.dataSource = new MatTableDataSource(this.data); this.dataSource.sort = this.sort; this.dataSource.paginator = this.paginator;
在HTML模板中,添加MatPaginator和MatSort:
完成以上步骤后,即可在表格中启用MatPaginator和MatSort了。
例如,以下是一个使用ng2-datatable的实现示例:
(1)导入MatPaginatorModule:
import { MatPaginatorModule } from '@angular/material';
@NgModule({
imports: [Ng2DataTableModule, MatPaginatorModule],
exports: [Ng2DataTableModule, MatPaginatorModule],
})
(2)添加MatPaginator到ng2-datatable中:
<