如何在Angular 4中为表添加分页? [英] How to add pagination in Angular 4 for a table?

问题描述

我是Angular 4的新手，如果有人可以告诉我如何在表中添加分页，我将不胜感激. 下面是我的代码:

I am new to Angular 4 and I would appreciate if somebody could tell me how I can add pagination in a table. Below is my code:

HTML:

<div *ngIf="tableDiv && adv1" id="adv1Div">
            <table class="table table-hover" id="adv1Table">
                <thead>
                    <tr class="black-muted-bg" >
                        <th class="align-right" *ngFor="let data of calendarTable[0].weeks">{{data.period}}</th>

                    </tr>
                </thead>
                <tbody>
                    <tr class="no-top-border" *ngFor="let item of calendarTable| paginate: { itemsPerPage: 9, currentPage: p };">
                        <td contenteditable='true' *ngFor="let data of item.weeks| paginate: { itemsPerPage: 9, currentPage: p };" class="align-right">{{data.price}}</td>   
                    </tr>
                </tbody>
                <a href="javascript:void(0)">
                    {{p}}
                  </a>

            </table>

        </div>         

我的JSON是:

 public calendarTable = [
      { name: "TV AD1", 
          weeks: [
          { period: "2/10/2017", price: "400" },
          { period: "9/10/2017", price: "800" },
          { period: "16/10/2017", price: "200" },
          { period: "23/10/2017", price: "500" },
          { period: "30/10/2017", price: "600" },
          { period: "6/11/2017", price: "800" },
          { period: "13/11/2017", price: "700" },
          { period: "20/11/2017", price: "800" },
          { period: "27/11/2017", price: "900" },
          { period: "4/12/2017", price: "400" },
          { period: "11/12/2017", price: "800" },
          { period: "18/12/2017", price: "200" },
          { period: "25/12/2017", price: "500" },
          { period: "1/1/2018", price: "600" },
          { period: "8/1/2018", price: "800" },
          { period: "15/1/2018", price: "700" },
          { period: "22/1/2018", price: "800" },
          { period: "29/1/2018", price: "900" }
          ]

          }
   ]

我要在表格中每页添加5个项目.请在这方面帮助我.

I want to add 5 items per page in a table. Please help me in this regard.

推荐答案

可以找到

A simple solution with ngx-pagination installed for Angular 4 can be found here. All you need is to import it to your ngModule and declare the page index in your component.ts as p: number = 1;.

在表格下方找到分页元素，如下所示:

Locate your pagination element under your table as shown below:

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

声明要在* ngFor//中显示的行数:

Declare the number of row to be shown in your *ngFor //:

<tr *ngFor="let game of games | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">

希望对您有帮助！

这篇关于如何在Angular 4中为表添加分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！