Angular2自定义分页组件


Posted in Javascript onApril 19, 2017

在项目中,前端传给后台的参数有:

pageSize:每页的条数

pageNo:当前页码

比如当前是第1页,每页20条,则后台返回第1页的20条记录(sql应该是用limit去获取分页数据)

同时,后台接口还会返回列表的总条数totalNum,前端根据totaNum/pageSize计算总共有多少页

如图:

Angular2自定义分页组件

注意事项:

需要先配置好路由(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.3water.com/201704/yuanma/ng2-paginator-master_3water.rar

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
微信小程序 开发经验整理
Feb 15 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
JavaScript中的类型检查
Feb 03 Javascript
package.json各个属性说明详解
Mar 11 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
React + Threejs + Swiper 实现全景图效果的完整代码
Jun 28 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 #Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 #Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 #Javascript
JavaScript实现前端分页控件
Apr 19 #Javascript
vue动态生成dom并且自动绑定事件
Apr 19 #Javascript
Vue响应式原理详解
Apr 18 #Javascript
详解vue-router基本使用
Apr 18 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python中kmeans聚类实现代码
2018/02/23 Python
python破解zip加密文件的方法
2018/05/31 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python类成员继承重写的实现
2020/09/16 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
国际花店:Pickup Flowers
2020/04/10 全球购物
小学生演讲稿
2014/01/12 职场文书
暑期培训随笔感言
2014/03/10 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
路政管理求职信
2014/06/18 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
银行自荐信范文
2015/03/25 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
python实现简单的聊天小程序
2021/07/07 Python