欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular2自定义分页组件

程序员文章站 2022-05-14 19:53:55
在项目中,前端传给后台的参数有: pagesize:每页的条数 pageno:当前页码 比如当前是第1页,每页20条,则后台返回第1页的20条记录(sql应该是用...

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

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:

源码下载:

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