我能用带表的垫子吗？

Question

有什么办法可以用普通桌子的垫子分页器吗？(不是席桌)还是有别的选择？我能用普通的桌子分页吗？

我尝试过这样做，但是所有的数据都没有被切片显示: 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

谢谢

Answer 1

使用角数据表中的角数据表

在使用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