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 相关文章推荐
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
微信小程序支付及退款流程详解
Nov 30 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 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水印技术
2007/02/14 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
详解PHP队列的实现
2019/03/14 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
2016/12/02 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
Linux CentOS7下安装python3 的方法
2018/01/21 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
意大利制造的男鞋和女鞋:SCAROSSO
2018/03/07 全球购物
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
预备党员承诺书
2014/03/25 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
出国留学英文自荐信
2015/03/25 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
python实现网络五子棋
2021/04/11 Python
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
Python语言中的数据类型-序列
2022/02/24 Python
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS