Html 如何在 Angular 4 中为表格添加分页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46806231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 14:56:54 来源:igfitidea点击:
How to add pagination in Angular 4 for a table?
提问by Neha Uniyal
I am new to Angular 4 and I would appreciate if somebody could tell me how I can add pagination in a table. Below is my code:
我是 Angular 4 的新手，如果有人能告诉我如何在表格中添加分页，我将不胜感激。下面是我的代码：
HTML:
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>
And my JSON is :
我的 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" }
]
}
]
I want to add 5 items per page in a table. Please help me in this regard.
我想在表格中每页添加 5 个项目。请在这方面帮助我。
回答by Mnemo
A simple solution with ngx-pagination installed for Angular 4 can be found here. All you need is to import it to your ngModule and declare the page index in your component.ts as p: number = 1;.
可以在此处找到为 Angular 4 安装了 ngx-pagination 的简单解决方案。您只需将其导入 ngModule 并将 component.ts 中的页面索引声明为p: number = 1;.
Locate your pagination element under your table as shown below:
在表格下找到分页元素，如下所示：
<pagination-controls (pageChange)="p = $event"></pagination-controls>
Declare the number of row to be shown in your *ngFor //:
声明要在 *ngFor // 中显示的行数：
<tr *ngFor="let game of games | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
Hope it helps you!
希望对你有帮助！
回答by Himanshu Bansal
you can check a tutorial here
你可以在这里查看教程
and you can find the demo here
你可以在这里找到演示
Update :- check here
更新：-检查这里
UPDATE 2 :-
The above tutorial actually have this base logic:-
1). max 10 links are shown at once.
2). active like is 6th position if active page if above 5 or below 4 from last position.
更新 2 :-
上面的教程实际上有这个基本逻辑:-
1)。一次最多显示 10 个链接。
2）。如果活动页面从最后一个位置高于 5 或低于 4，则活动喜欢是第 6 位。
pagination logic(added as a service to be able to reuse) :-
分页逻辑（添加为服务以便能够重用）：-
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
};
}
}
Component which use the pagination service :-
使用分页服务的组件：-
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);
}
}
The HTML Template:-
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>
update 3:-
A simpler approach...though i provided a single button with toggle logic which you can change it with multiple buttons
更新 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];
}
}
plunkras requested.
plunkr根据要求。
回答by Amit
You can use Angular DataTable, if you want.
如果需要，您可以使用 Angular DataTable。
For documentation:
对于文档：
