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路由与导航)
使用步骤:
(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:
源码下载:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!