Angular2自定义分页组件

在项目中，前端传给后台的参数有：pageSize：每页的条数pageNo：当前页码比如当前是第1页，

在项目中，前端传给后台的参数有：

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 = 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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！