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 tools 系列 scrollable(2)
Sep 06 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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入门学习知识点三 PHP上传
2011/07/14 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
jQuery Ajax 实例全解析
2011/04/20 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
python实现人工蜂群算法
2020/09/18 Python
PyQt实现计数器的方法示例
2021/01/18 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
计算机工程学院个人求职信
2013/10/05 职场文书
生产助理岗位职责
2014/06/18 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
公司开业致辞
2015/07/29 职场文书
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技