Angular2 custom paging component, angular2 custom Paging

Angular2 custom paging component, angular2 custom Paging

In the project, parameters sent from the frontend to the backend are as follows:

PageSize: number of entries per page

PageNo: Current page number

For example, if there are currently 1st pages and 20 records on each page, the background returns 20 records on 1st pages (SQL should use limit to retrieve paging data)

At the same time, the back-end interface will return the total number of items in the list totalNum. The front-end will calculate the total number of pages based on totaNum/pageSize.

Note:

You need to configure the routing (Angular2 routing and navigation) first)

Procedure:

(1) introduce the paging component in the project

// app.module.tsimport { 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) Use the paging component on the page:

// Demo.html <! -- PageSize, totalNum, curPage, totalPage --> <page-template [pageParams] = "{pageSize: 20, totalNum: 100, curPage: 1, totalPage: 5} "(changeCurPage) =" getPageData ($ event) "> </page-template> // demo. tsimport {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; // Save the page url parameter public totalNum = 0; // The total number of data entries public pageSize = 20; // The number of data entries per page public totalPage = 0; // total number of pages public curPage = 1; // the current page number 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 ('current page', vm. curPage) ;}} else {vm. params ={}}} getPageData (pageNo) {let vm = this; vm. curPage = pageNo; console. log ('trigger ', pageNo );}}

Paging component source code:

Page.html

<! -- Pagination component --> <div class = "col-md-12 text-right margin-bottom" * ngIf = "pageParams. totalPage> 1 & pageParams. totalNum> 0 "> <a class =" pull-left text-sm "> total {pageParams. totalNum}, {pageParams. curPage }}/ {pageParams. totalPage }}page </a> <button class = "btn-default previous" [routerLink] = "['. /'] "[disabled] =" pageParams. curPage <= 5 "(click) =" changePage (pageParams. curPage-5) "[queryParams] =" {pageNo: pagePar Ams. curPage-5} "> </button> <button class =" btn-default next "[routerLink] = "['. /'] "(click) =" changePage (pageParams. curPage-1) "[queryParams] =" {pageNo: pageParams. curPage-1} "[disabled] =" pageParams. curPage = 1 "> previous page </button> <button class =" btn-default "[routerLink] = "['. /'] "[disabled] =" pageParams. curPage = page. pageNo "(click) =" changePage (page. pageNo) "[queryParams] =" page "* ngFor =" let page of ge TPageList (pageParams) "> {page. pageNo }}</button> <button class = "btn-default next" [routerLink] = "['. /'] "(click) =" changePage (pageParams. curPage-(-1) "[queryParams] =" {pageNo: pageParams. curPage-(-1)} "[disabled] =" pageParams. curPage = pageParams. totalPage "> next page </button> <button class =" btn-default previous "[routerLink] = "['. /'] "[disabled] =" pageParams. totalPage-pageParams.curPage <= 5 "(click) =" c HangePage (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 "> Empty </div>

Page. ts

Import {Component, Input, Output, EventEmitter} from '@ angular/core'; @ Component ({selector: 'page', templateUrl :'. /page.html '}) export class Page {@ Input ('pageparams') pageParams; // The parent component transmits the value @ Output () changeCurPage to the child component: eventEmitter <Number> = new EventEmitter; // The child component broadcasts an event to the parent component, triggering the event to change the current page public pageList = [1, 2, 3, 4, 5]; public totalPage = 5; constructor () {let vm = this; // console. log ('parameters obtained from the parent component ', vm ['pageparams']);} getPageList (pageParams) {/* Paging setting */let pageList = []; if (pageParams. totalPage <= 5) {// if the total number of pages is less than 5 (the first five pages), directly put it in the array to display for (let I = 0; I <pageParams. totalPage; I ++) {pageList. push ({pageNo: I + 1}) ;}} else if (pageParams. totalPage-pageParams. curPage <5 & pageParams. curPage> 4) {// if the total number of pages minus the current number of pages is less than 5 (the last 5 pages are reached), pageList = [{pageNo: pageParams is displayed. curPage-4}, {pageNo: pageParams. curPage-3}, {pageNo: pageParams. curPage-2}, {pageNo: pageParams. curPage-1}, {pageNo: pageParams. curPage}];} else {// number of pages in the center 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 ('modify pageNo page ', pageNo); vm. pageParams. curPage = pageNo; vm. changeCurPage. emit (vm. pageParams. curPage );}}

Ng2 is still getting started, and the components need to be improved. Please advise more

Project demo: https://github.com/youzouzou/ng2-paginator

Source code download: http://xiazai.jb51.net/201704/yuanma/ng2-paginator-master_jb51.rar

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!