有没有办法我可以在普通桌子上使用mat-paginator? (不是垫子表) 还是有其他选择?我可以通过普通表进行分页吗?
我尝试过此操作,但所有数据均显示为未切片: HTML:
<table class="table table-bordered">
<thead>
<tr>
<th>Account #</th>
<th>Expiry Date</th>
<th>CVC</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let card of cards ">
<td>{{card.Account}}</td>
<td>{{card.Expiry_Date}}</td>
<td>{{card.CVC}}</td>
</tr>
</tbody>
</table>
</div>
<mat-paginator #paginatorU [length]="12"
[pageSize]="3"
[pageSizeOptions]="[3, 6, 9, 12]">
</mat-paginator>
ts:
@ViewChild('paginatorU',{static: true}) paginatorU: MatPaginator;
//after getting the data:
this.cards.paginator = this.paginatorU
谢谢
答案 0 :(得分:0)
使用Angular-datatables在Angular中使用角度数据表
您需要先安装其依赖项,然后才能使用NPM获取最新版本:
npm install jquery --save npm install datatables.net --save npm install datatables.net-dt --save npm install angular-datatables@6.0.0 --save npm install @types/jquery --save-dev npm install @types/datatables.net --save-dev
angular.json
Import the DataTablesModule in app.module.ts
import { DataTablesModule } from 'angular-datatables';
imports: [
DataTablesModule
],
我的datatableslibrary.ts
import { Component, OnInit, OnDestroy, AfterViewInit, ViewChild } from '@angular/core';
import { Http, Response } from '@angular/http'; import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http'; import { DataService } from '../data.service';
import { DataTableDirective } from 'angular-datatables';
@Component({ selector: 'app-datatableslibrary',
templateUrl: './datatableslibrary.component.html',
styleUrls: ['./datatableslibrary.component.css'] })
export class DatatableslibraryComponent implements AfterViewInit, OnInit, OnDestroy {
users: any[] = []; dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
constructor(private http: HttpClient, private data: DataService) { }
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5 };
this.getusers();}
getusers(){
this.data.getUsers().subscribe(data => {
this.users = data;
this.rerender();
}); }
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});}
ngAfterViewInit(): void {
this.dtTrigger.next();
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}}
my datatableslibrary.component.html
<table class="table table-striped" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
<thead>
<tr><th>Name</th>
<th>Email</th>
<th>Website</th></tr>
</thead>
<tbody>
<tr *ngFor="let user of users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.website }}</td></tr>
</tbody> </table>
Note: Please follow below link if you find any difficulty
https://l-lin.github.io/angular-datatables/#/advanced/rerender