如何在Angular 4中为表添加分页？

问题描述：

我是Angular 4的新手，如果有人能告诉我如何在表格中添加分页，我将不胜感激。下面是我的代码：如何在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个项目每页。在这方面请帮助我。

只限制你的'* ngFor'打印5行5行？ –

您可以尝试使用Angular Datatable：https://www.npmjs.com/package/angular2-datatable – Amit

查看https://www.npmjs.com/package/ng2-table – jitender

答

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

对于文档：

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

感谢您的回复。但该解决方案是为表格行提供分页。有没有我可以申请专栏的已知分页属性。 –

答

您可以检查教程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改变按照要求。

谢谢你的答案，但它不会在Angular4中工作。 –

赫赫我以为你会通过它得到想法..给我一段时间...我会提供代码...我会更新答案....我实际上.. –

@NehaUniyal检查更新 –

答

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

希望它可以帮助你！

如何在Angular 4中为表添加分页？

相关推荐