Angular2 custom paging component, angular2 custom Paging

Source: Internet
Author: User
Tags export class

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.