如何在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 4安装ngx-pagination的简单解决方案。 您只需将它导入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">

希望它能帮到你！

Answer 2

你可以在这里查看教程

你可以在这里找到演示

更新： - 点击这里

更新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

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

有关文件：

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