时间:2021-05-28
在项目中,前端传给后台的参数有:
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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了Angular2使用路由自定义弹出组件toast操作。分享给大家供大家参考,具体如下:原理:使用Angular2的命名路由插座,一个用来显示app
Angular2PrimeNG源码学习Paginator分页组件GITHUB地址首先分析一下分页功能的需求:由父组件传入数据总数量,每页显示数量,可自定义初始页
由于angular2兴起不久,相关插件还是很少,所以有时候不得不用一些jquery插件来完成项目,那么如何把jquery插件放到angular2中呢?采用自定义
本文实例讲述了Angular2使用SVG自定义图表(条形图、折线图)组件。分享给大家供大家参考,具体如下:要求:用户将数据作为参数传进来,通过类型决定渲染何种类
本文介绍了ANGULAR2与D3.js集成实现自定义可视化的方法,分享给大家,具体如下:目标展现层与逻辑层分离数据与可视化组件相分离数据与视图双向绑定,实时更新