创建一个分页包 pagination,然后在里面依次创建几个文件:
page.component.html 分页组件的标签内容
page.conponent.ts 分页组件定义
pagination.ts 分页组件所需配置信息的对象
page.component.html 分页组件的标签内容
page.conponent.ts 分页组件定义
pagination.ts 分页组件所需配置信息的对象
index.ts 导出分页组件
page.component.html
<!--分页组件的标签内容-->
<nav aria-label="Page navigation" style="float: right">
<ul class="pagination">
<li class="page-item" [ngClass]="{disabled:pagination.currentPage === 1}">
<a class="page-link" href="javascript:void(0);" (click)="prePage()" aria-label="Previous">
<span aria-hidden="true">上一页</span>
</a>
</li>
<li class="page-item" *ngFor="let item of pageList;trackBy:index" [ngClass]="{active:item === pagination.currentPage}">
<a class="page-link" href="javascript:void(0);" (click)="changeCurrentPage(item)">{{item}}</a>
</li>
<li class="page-item" [ngClass]="{disabled:pagination.currentPage === pageNum}">
<a class="page-link" href="javascript:void(0);" (click)="nextPage()" aria-label="Next">
<span aria-hidden="true">下一页</span>
</a>
</li>
</ul>
</nav>
page.component.ts
//分页组件定义
import {Component, Input, DoCheck} from "@angular/core";
import { Pagination } from "./pagination";
@Component({
selector: 'page',
templateUrl: "./page.component.html"
})
export class PageComponent implements DoCheck {
@Input()
public pagination: Pagination;
public pageNum: number;
public pageList: any[];
private oldTotalItems: number = 0;
public changeCurrentPage(item: any): void {
if (typeof item === 'number') {
this.pagination.currentPage = item;
this.pagination.changePage();
}
}
public prePage(): void {
if (this.pagination.currentPage != 1) {
this.changeCurrentPage(this.pagination.currentPage - 1);
}
}
public nextPage(): void {
if (this.pagination.currentPage < this.pageNum) {
this.changeCurrentPage(this.pagination.currentPage + 1);
}
}
public initPageList(): void {
//偏移量(因为要除去首页和尾页,所以要-1)
let offset = Math.floor(this.pagination.pageLength / 2) - 1;
//如果没有数据显示一页
this.pagination.totalItems = this.pagination.totalItems > 0 ? this.pagination.totalItems : 1;
//总页数
this.pageNum = Math.ceil(this.pagination.totalItems / this.pagination.pageItems);
this.pageList = [];
if (this.pageNum <= this.pagination.pageLength) {
for (let i = 1; i <= this.pageNum; i++) {
this.pageList.push(i);
}
} else {
//左边没有'...'
if (this.pagination.currentPage < this.pagination.pageLength - offset) {
for (let i = 1; i < this.pagination.pageLength; i++) {
this.pageList.push(i);
}
this.pageList.push('...');
this.pageList.push(this.pageNum);
//右边没有'...'
} else if (this.pagination.currentPage >= this.pageNum - offset - 1) {
this.pageList.push(1);
this.pageList.push('...');
for (let i = this.pagination.pageLength - 2; i >= 0; i--) {
this.pageList.push(this.pageNum - i);
}
//两边都有'...'
} else {
this.pageList.push(1);
this.pageList.push('...');
for (let i = this.pagination.currentPage - offset; i <= this.pagination.currentPage + offset; i++) {
this.pageList.push(i);
}
this.pageList.push('...');
this.pageList.push(this.pageNum);
}
}
}
ngDoCheck(): void {
if (this.pagination.totalItems != this.oldTotalItems) {
this.initPageList();
this.oldTotalItems = this.pagination.totalItems;
}
if (this.pagination.currentPage > this.pageNum) {
this.pagination.currentPage = this.pageNum;
this.pagination.changePage();
}
}
}
pagination.ts
//分页组件所需配置信息的对象
export class Pagination {
/**
* 构造函数,同时设置属性,初始值
* @param pageLength 显示的页码数,奇数,默认7
* @param currentPage 当前页码数,默认1
* @param totalItems 总条数 默认0
* @param pageItems 每页显示条数,默认10
* @param changePage 翻页时调用的方法
*/
constructor(
public pageLength: number = 7,
public currentPage: number = 1,
public totalItems: number = 0,
public pageItems: number = 10,
public changePage: () => void
) { }
public static defaultPagination = new Pagination(7, 1, 0, 10, function () { });
}
index.ts
//导出分页组件
export * from './page.component';
使用:
先在app.module.ts 的declarations加入分页组件
在要使用的组件页面中加入:
<page [(pagination)]="pagination"> </page>
在对应ts中:
import { Pagination } from '../pagination/pagination';
@Output()
public pagination: Pagination = Pagination.defaultPagination;
ngOnInit() {
this.initList();
this.pagination.changePage = (() => {
this.initList();
});
};
private initList(): void {
let url: string = 'your-url';
let page = this.pagination.currentPage - 1;
this.pagination.totalItems = 12;
let head = page * this.pagination.pageItems;
let end = head + this.pagination.pageItems - 1;
this.routes = ROUTE.slice(head, end);
}
changePage()函数是在使用分页组件的ts中定义的,如上述代码,page是当前页面-1,totalItem是数据总数,此例中没有与接口对接,使用了模拟数据ROUTE,是一个数组,里面有12个json对象。每页显示的数据放在this.routes中,在html中用ngfor循环展示。
有两种数据加载方式:
1、一次性取出全部数据,如上例所示,然后每次changePage时对整体数据(例子中ROUTE数组)进行分割,根据当前页面page和每页的数据数pageItems计算出分割的head和end,将该page该显示的数据放到this.routes中。
2、每次changePage都对后台发起一次请求,将page发过去,后台返回全部数据数赋给totalItem,返回该page页数据赋给this.routes。