Angular2自定義分頁元件

在項目中，前端傳給背景的參數有：

pageSize：每頁的條數

pageNo：目前頁碼

比如目前是第1頁，每頁20條，則背景傳回第1頁的20條記錄（sql應該是用limit去擷取分頁資料）

同時，背景接口還會傳回清單的總條數totalNum，前端根據totaNum/pageSize計算總共有多少頁

如圖：

注意事項：

需要先配置好路由（Angular2路由與導航）

使用步驟：

（1）在項目中引入分頁元件

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { RouterModule }   from '@angular/router';
import { Demo }   from './demo/demo';
import { Page }   from './page/page';

@NgModule({
  declarations: [
    AppComponent,
    Demo,
    Page
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'demo',
        component: Demo
      }
    ]),
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
           

（2）在頁面中使用分頁元件：

// demo.html
<!--分頁元件參數：pageSize,totalNum,curPage,totalPage-->
<page-template [pageParams]="{pageSize:20,totalNum:100,curPage:1,totalPage:5}" (changeCurPage)="getPageData($event)"></page-template>
           

// demo.ts
import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'demo',
  templateUrl: './demo.html'
})
export class Demo {
  public params; // 儲存頁面url參數
  public totalNum = ; // 總資料條數
  public pageSize = ;// 每頁資料條數
  public totalPage = ;// 總頁數
  public curPage = ;// 目前頁碼
  constructor(location:Location) {
    let vm = this;
    if (vm.params) {
      vm.params = vm.params.replace('?', '').split('&');
      let theRequest = [];
      for (let i = ; i < vm.params.length; i++) {
        theRequest[vm.params[i].split("=")[]] = vm.params[i].split("=")[] == 'pageNo' ? parseInt(vm.params[i].split("=")[]) : vm.params[i].split("=")[];
      }
      vm.params = theRequest;
      if (vm.params['pageNo']) {
        vm.curPage = vm.params['pageNo'];
        //console.log('目前頁面', vm.curPage);
      }
    } else {
      vm.params = {};
    }
  }
  getPageData(pageNo) {
    let vm = this;
    vm.curPage = pageNo;
    console.log('觸發', pageNo);
  }
}
           

分頁元件源碼：

page.html

<!--分頁元件-->
<div class="col-md-12 text-right margin-bottom" *ngIf="pageParams.totalPage>1 && pageParams.totalNum>0">
  <a class="pull-left text-sm">總計 {{pageParams.totalNum}} 條，第 {{pageParams.curPage}} / {{pageParams.totalPage}} 頁</a>
  <button class="btn btn-default previous" [routerLink]="['./']" [disabled]="pageParams.curPage<=5"
          (click)="changePage(pageParams.curPage-5)" [queryParams]="{pageNo:pageParams.curPage-5}"><<</button>
  <button class="btn btn-default next" [routerLink]="['./']" (click)="changePage(pageParams.curPage-1)"
          [queryParams]="{pageNo:pageParams.curPage-1}" [disabled]="pageParams.curPage==1">上一頁</button>
  <button class="btn btn-default" [routerLink]="['./']" [disabled]="pageParams.curPage==page.pageNo"
          (click)="changePage(page.pageNo)" [queryParams]="page" *ngFor="let page of getPageList(pageParams)">
    {{page.pageNo}}
  </button>
  <button class="btn btn-default next" [routerLink]="['./']" (click)="changePage(pageParams.curPage-(-1))"
          [queryParams]="{pageNo:pageParams.curPage-(-1)}" [disabled]="pageParams.curPage==pageParams.totalPage">下一頁</button>
  <button class="btn btn-default previous" [routerLink]="['./']" [disabled]="pageParams.totalPage-pageParams.curPage<=5"
          (click)="changePage(pageParams.curPage-(-5))" [queryParams]="{pageNo:pageParams.curPage-(-5)}">>></button>
</div>
<div class="col-md-12 text-center text-sm text-dark-gray" *ngIf="!pageParams.totalNum">
  空空如也
</div>

           

page.ts

import { Component,Input, Output,EventEmitter } from '@angular/core';
@Component({
  selector: 'page',
  templateUrl: './page.html'
})

export class Page {
  @Input('pageParams') pageParams;// 父元件向子元件傳值
  @Output() changeCurPage:EventEmitter<Number> = new EventEmitter;// 子元件向父元件廣播事件，觸發改變目前頁面的事件

  public pageList = [, , , , ];
  public totalPage = ;

  constructor() {
    let vm = this;
    //console.log('從父元件擷取的參數', vm['pageParams']);

  }

  getPageList(pageParams) {
    /*分頁設定*/
    let pageList=[];
    if (pageParams.totalPage <= ) {//如果總的頁碼數小于5（前五頁），那麼直接放進數組裡顯示
      for (let i = ; i < pageParams.totalPage; i++) {
        pageList.push({
          pageNo: i + 
        });
      }
    } else if (pageParams.totalPage - pageParams.curPage <  && pageParams.curPage > ) {//如果總的頁碼數減去目前頁碼數小于5（到達最後5頁），那麼直接計算出來顯示
      pageList = [
        {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage - 
        }, {
          pageNo: pageParams.curPage
        }
      ];
    } else {//在中間的頁碼數
      let cur = Math.floor((pageParams.curPage - ) / ) *  + ;
      pageList = [
        {
          pageNo: cur
        }, {
          pageNo: cur + 
        }, {
          pageNo: cur + 
        }, {
          pageNo: cur + 
        }, {
          pageNo: cur + 
        },
      ];
    }
    return pageList;
  }


  changePage(pageNo) {
    let vm = this;
    //console.log('修改頁碼', pageNo);
    vm.pageParams.curPage = pageNo;
    vm.changeCurPage.emit(vm.pageParams.curPage);
  }
}
           

ng2還在入門中，元件有待完善，請多多指教

項目demo：https://github.com/youzouzou/ng2-paginator