如何在 Angular 4 中为表格添加分页？
Posted
技术标签:
【中文标题】如何在 Angular 4 中为表格添加分页？【英文标题】：How to add pagination in Angular 4 for a table? 【发布时间】：2018-03-30 02:16:26 【问题描述】：我是 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 x 5 行？
您可以尝试使用 Angular 数据表：npmjs.com/package/angular2-datatable
看看npmjs.com/package/ng2-table
【参考方案1】：
可以在here 找到为 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">
希望对你有帮助！
【讨论】：
这是一个非常简单的解决方案，非常感谢！ @Mnemo ，对我来说，每一页都重复相同的内容。请帮忙。 @ADARSHK 您能否详细说明或在 plunkr 中显示？这可能是由于您的数组数据问题，而不是分页问题。 @Mnemo，我提出了一个问题，描述了我在这个问题中的详细信息。我将分享链接。请查看并帮助寻求解决方案。 ***.com/q/59316363/9493078【参考方案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;elsethis.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 中不起作用。 嘿嘿，我想你会明白的..给我一点时间...我会提供代码...我会更新答案....我真的出去了.. 虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Reviewthis.pager = this.pagerService.getPager(this.allItems.length, page);查看Appcomponent中的pagerService @bubble-cord
@bubble-cord 没问题^^【参考方案3】：
如果需要，您可以使用 Angular DataTable。
文档：
https://www.npmjs.com/package/angular2-datatable
【讨论】：
感谢您的回复。但该解决方案是为表格行提供分页。是否有任何已知的分页属性可以申请列。以上是关于如何在 Angular 4 中为表格添加分页？的主要内容，如果未能解决你的问题，请参考以下文章