Angular 如何在表格中进行分页

Question

我有一个 bootstrap 的简单 table。这是显示数组的结果。我需要添加分页。意味着它加载第一个 40 个数组，然后在第二个分页中加载 40 个这样的数组。我找到了一些示例，但未能使用 bootstrap table 实现它。如果有人可以在代码方面提供帮助，谢谢。

          <table class="table table-responsive-md text-center">
            <thead>
              <tr>
               <th>ID</th>
               <th>NAME</th>
               <th>COMPANY</th>

                 </tr>
                </thead>

              <tbody *ngIf="data">
               <tr *ngFor="let x of data | filterBy: userFilter"  (click)="openDeal(deletecontent, x)">
                 <td>
                   <span class="text-success">{{x.user_id}}</span>
                 </td>


               <td>
                 <div style="text-align: left;">
                  <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image-png.png'" class="img-sm" alt="" style="text-align: left;">
                   {{x.name}}                </div>
              </td>

               <td>{{x.cnic}}</td>

                 </tr>
                </tbody>
              </table>

.ts

getClaims(){

  this.emp = true;
  this.url = 'assets/employe.json?';



  this.clientData = this.httpClient.get<any>(this.url,{responseType: 'json'}).
  subscribe(data => {
  console.log(data);
  this.data4 = data.records;
  this.data = this.data4.filter(item => item.company_id === this.userFilter.company_id);

  this.employesnumber = this.data.count;
  console.log(this.employesnumber);
  });

 }

Answer 1

尝试使用 ngx-pagination 模块。

 <table class="table table-responsive-md text-center">
        <thead>
          <tr>
           <th>ID</th>
           <th>NAME</th>
           <th>COMPANY</th>

             </tr>
            </thead>

          <tbody *ngIf="data">
           <tr *ngFor="let x of data | filterBy: userFilter | paginate: { itemsPerPage: 40, currentPage: p }""  (click)="openDeal(deletecontent, x)">
             <td>
               <span class="text-success">{{x.user_id}}</span>
             </td>


           <td>
             <div style="text-align: left;">
              <img [src]="x.userPhoto || 'https://mbtskoudsalg.com/images/user-image- 
              png.png'" class="img-sm" alt="" style="text-align: left;">
               {{x.name}}                </div>
          </td>

           <td>{{x.cnic}}</td>

          </tr>
            <pagination-controls (pageChange)="p = $event"></pagination-controls>
            </tbody>
          </table>

同时在你的 typescript 文件中声明一个变量 p 并且不要忘记安装 npm 包 ngx-pagination 并将它们导入你的模块

Angular 如何在表格中进行分页

Angular how to make pagination in tables

angular-ui-bootstrap

angular