logo标签列表

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

htmlangularhtml-tablepagination
9

我是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行即可。 - anteAdamovic
你可以尝试使用Angular Datatable: https://www.npmjs.com/package/angular2-datatable - Amit
请查看 https://www.npmjs.com/package/ng2-table - jitender
3个回答
20

在安装了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">

希望能对你有所帮助！

2
这是一个非常简单的解决方案，非常感谢！ - Jacques Olivier
@Mnemo，每个页面都重复出现相同的内容，请帮忙解决。 - ADARSH K
@ADARSHK，您能否详细说明一下或在plunkr中展示一下？这很可能是由于您的数组数据问题而不是分页问题。 - Mnemo
@Mnemo，我提出了一个问题，并在描述中提供了详细信息。我将分享链接，请查看并帮助找到解决方案。https://stackoverflow.com/q/59316363/9493078 - ADARSH K
3

你可以在这里查看教程。

同时，你可以在这里找到演示。

更新：- 查看这里

更新2：
上述教程实际上有以下基本逻辑：
1). 最多同时显示10个链接。
2). 如果活动页面在倒数第4个位置之前或在第5个位置之后，则活动链接为第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如所请求。

1
谢谢您的回答，但它在Angular4中不起作用。 - Neha Uniyal
@TobySpeight 谢谢...我还在外面..回到家后我会做的:) 我本来就计划这样做 ^_^ - Himanshu Bansal
{btsdaf} - Himanshu Bansal
1
this.pager = this.pagerService.getPager(this.allItems.length, page); 在AppComponent中检查pagerService @bubble-cord - Himanshu Bansal
1
@bubble-cord 没问题 ^^ - Himanshu Bansal
显示剩余6条评论
1
{btsdaf} - Neha Uniyal
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接