如何在Angular 4中爲表添加分頁？

Question

我是Angular 4的新手，如果有人能告訴我如何在表格中添加分頁，我將不勝感激。 下面是我的代碼：

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個項目每頁。在這方面請幫助我。

Answer 1

如果需要，您可以使用Angular DataTable。

對於文檔：

https://www.npmjs.com/package/angular2-datatable

Answer 2

您可以檢查教程here

，你可以找到演示here

更新： - 檢查here

更新2： -
上面教程實際上有此基礎邏輯： -
1）。一次顯示最多10個鏈接。 2）。如果主動頁面在5位以上或者位於最後位置4位以下，則激活如第6位。

分頁邏輯（添加作爲服務，以便能夠重新使用）： - 其使用分頁服務

import * as _ from 'underscore'; 

export class PagerService { 
    getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) { 
     // calculate total pages 
     let totalPages = Math.ceil(totalItems/pageSize); 

     let startPage: number, endPage: number; 
     if (totalPages <= 10) { 
      // less than 10 total pages so show all 
      startPage = 1; 
      endPage = totalPages; 
     } else { 
      // more than 10 total pages so calculate start and end pages 
      if (currentPage <= 6) { 
       startPage = 1; 
       endPage = 10; 
      } else if (currentPage + 4 >= totalPages) { 
       startPage = totalPages - 9; 
       endPage = totalPages; 
      } else { 
       startPage = currentPage - 5; 
       endPage = currentPage + 4; 
      } 
     } 

     // calculate start and end item indexes 
     let startIndex = (currentPage - 1) * pageSize; 
     let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1); 

     // create an array of pages to ng-repeat in the pager control 
     let pages = _.range(startPage, endPage + 1); 

     // return object with all pager properties required by the view 
     return { 
      totalItems: totalItems, 
      currentPage: currentPage, 
      pageSize: pageSize, 
      totalPages: totalPages, 
      startPage: startPage, 
      endPage: endPage, 
      startIndex: startIndex, 
      endIndex: endIndex, 
      pages: pages 
     }; 
    } 
} 

組件： -

import { Component, OnInit } from '@angular/core'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map' 

import * as _ from 'underscore'; 

import { PagerService } from './_services/index' 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: 'app.component.html' 
}) 

export class AppComponent implements OnInit { 
    constructor(private http: Http, private pagerService: PagerService) { } 

    // array of all items to be paged 
    private allItems: any[]; 

    // pager object 
    pager: any = {}; 

    // paged items 
    pagedItems: any[]; 

    ngOnInit() { 
     // get dummy data 
     this.http.get('./dummy-data.json') 
      .map((response: Response) => response.json()) 
      .subscribe(data => { 
       // set items to json response 
       this.allItems = data; 

       // initialize to page 1 
       this.setPage(1); 
      }); 
    } 

    setPage(page: number) { 
     if (page < 1 || page > this.pager.totalPages) { 
      return; 
     } 

     // get pager object from service 
     this.pager = this.pagerService.getPager(this.allItems.length, page); 

     // get current page of items 
     this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1); 
    } 
} 

HTML模板： -

<div> 
    <div class="container"> 
     <div class="text-center"> 
      <h1>Angular 2 - Pagination Example with logic like Google</h1> 

      <!-- items being paged --> 
      <div *ngFor="let item of pagedItems">{{item.name}}</div> 

      <!-- pager --> 
      <ul *ngIf="pager.pages && pager.pages.length" class="pagination"> 
       <li [ngClass]="{disabled:pager.currentPage === 1}"> 
        <a (click)="setPage(1)">First</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === 1}"> 
        <a (click)="setPage(pager.currentPage - 1)">Previous</a> 
       </li> 
       <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}"> 
        <a (click)="setPage(page)">{{page}}</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> 
        <a (click)="setPage(pager.currentPage + 1)">Next</a> 
       </li> 
       <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}"> 
        <a (click)="setPage(pager.totalPages)">Last</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

更新3： -
更簡單的方法...雖然我具備切換邏輯的一個按鈕，你可以有多個按鈕

@Component({ 
     selector: 'my-app', 
     template:` 
        <div> 
         <h5>TV ADS</h5> 

           <ul> 
            <li *ngFor="let item of calendarTableSelected.weeks"> 
            <span>{{item.period}}</span> 
            </li> 
           </ul> 
        </div> 
        <div> 
         <button (click)="update()">change</button> 
        </div> 
       ` 
    }) 
    export class SomeComponent { 
       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" } 
      ] 
     }, 
     { name: "TV AD2", 
      weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { 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" } 
      ] 
      }, 

     { name: "TV AD3", 
      weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { 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" } 
      ] 
      }, 

     { name: "TV AD4", 
     weeks: [ 
      { period: "2/10/2017", price: "500" }, 
      { period: "9/10/2017", price: "600" }, 
      { period: "16/10/2017", price: "700" }, 
      { period: "23/10/2017", price: "800" }, 
      { period: "30/10/2017", price: "900" }, 
      { period: "6/10/2017", price: "100" }, 
      { period: "13/10/2017", price: "200" }, 
      { period: "20/10/2017", price: "300" }, 
      { period: "27/10/2017", price: "400" }, 
      { 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" } 
      ] 
      } 
    ] 
     calendarTableSelected: Array; 
     i: number= 0; 
     constructor() { 
      this.calendarTableSelected = this.calendarTable[0]; 
     } 
     update(){ 
      if(this.i == 0){this.i = 1;}else{this.i = 0}// change this acc. to your needed logic or use any of the above provided links to form your logic 
      this.calendarTableSelected = this.calendarTable[this.i]; 
     } 

    } 

plunkr改變按照要求。

Answer 3

使用ngx-pagination爲Angular 4安裝的簡單解決方案可以在here找到。所有你需要的是將它導入你的ngModule並在你的component.ts中聲明頁索引爲p: number = 1;。

找到您的分頁元素桌下，如下圖所示：

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

聲明行的數量在顯示你的* ngFor //：

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

希望它可以幫助你！