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。