Angular2自定义分页组件

网友投稿 234 2023-05-23


Angular2自定义分页组件

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

pageSize:每页的条数

pageNo:当前页码

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

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

如图:

注意事项:

需要先配置好路由(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

// 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

总计 {{pageParams.totalNum}} 条,第 {{pageParams.curPage}} / {{pageParams.totalPage}} 页

(click)="changePage(pageParams.curPage-5)" [queryParams]="{pageNo:pageParams.curPage-5}"><<

[queryParams]="{pageNo:pageParams.curPage-1}" [disabled]="pageParams.curPage==1">上一页

(click)="changePage(page.pageNo)" [queryParams]="page" *ngFor="let page of getPageList(pageParams)">

{{page.pageNo}}

[queryParams]="{pageNo:pageParams.curPage-(-1)}" [disabled]="pageParams.curPage==pageParams.totalPage">下一页

(click)="changePage(pageParams.curPage-(-5))" [queryParams]="{pageNo:pageParams.curPage-(-5)}">>>

空空如也

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 = 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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:详解SpringBoot配置连接池
下一篇:Java 队列 Queue 用法实例详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~