Angular2自訂分頁組件，angular2自訂分頁

Angular2自訂分頁組件，angular2自訂分頁

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

pageSize：每頁的條數

pageNo：當前頁碼

比如當前是第1頁，每頁20條，則後台返回第1頁的20條記錄（sql應該是用limit去擷取分頁資料）

同時，後台介面還會返回列表的總條數totalNum，前端根據totaNum/pageSize計算總共有多少頁

注意事項：

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

使用步驟：

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

// app.module.tsimport { 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.tsimport { 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 = 0; // 總資料條數 public pageSize = 20;// 每頁資料條數 public totalPage = 0;// 總頁數 public curPage = 1;// 當前頁碼 constructor(location:Location) {  let vm = this;  if (vm.params) {   vm.params = vm.params.replace('?', '').split('&');   let theRequest = [];   for (let i = 0; i < vm.params.length; i++) {    theRequest[vm.params[i].split("=")[0]] = vm.params[i].split("=")[0] == 'pageNo' ? parseInt(vm.params[i].split("=")[1]) : vm.params[i].split("=")[1];   }   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 = [1, 2, 3, 4, 5]; public totalPage = 5; constructor() {  let vm = this;  //console.log('從父組件擷取的參數', vm['pageParams']); } getPageList(pageParams) {  /*分頁設定*/  let pageList=[];  if (pageParams.totalPage <= 5) {//如果總的頁碼數小於5（前五頁），那麼直接放進數組裡顯示   for (let i = 0; i < pageParams.totalPage; i++) {    pageList.push({     pageNo: i + 1    });   }  } else if (pageParams.totalPage - pageParams.curPage < 5 && pageParams.curPage > 4) {//如果總的頁碼數減去當前頁碼數小於5（到達最後5頁），那麼直接計算出來顯示   pageList = [    {     pageNo: pageParams.curPage - 4    }, {     pageNo: pageParams.curPage - 3    }, {     pageNo: pageParams.curPage - 2    }, {     pageNo: pageParams.curPage - 1    }, {     pageNo: pageParams.curPage    }   ];  } else {//在中間的頁碼數   let cur = Math.floor((pageParams.curPage - 1) / 5) * 5 + 1;   pageList = [    {     pageNo: cur    }, {     pageNo: cur + 1    }, {     pageNo: cur + 2    }, {     pageNo: cur + 3    }, {     pageNo: cur + 4    },   ];  }  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

源碼下載：http://xiazai.jb51.net/201704/yuanma/ng2-paginator-master_jb51.rar

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的協助，同時也希望多多支援幫客之家！