ng2+ng2-bootstrap+express实现分页效果

效果图

导读：使用ng2-bootstrap模块，来实现分页效果。
实现原理：封装分页组件，在需要的地方直接调用这个组件
1、所以就用到了@Input()父组件提供总页数
2、单击分页的时候，子组件将当前页传递给父组件(@Output)，在传递给后台express,通过limit(page-1)*2, 10来查询数据，然后更新数据。

1、封装分页组件

child.component.html

<!--分页-->
<div class="col-md-6">
  <!--
    参数说明:
    1. totalItems: 总条数
    2. maxSize: 最大显示几页, 其余显示...
    3. (pageChanged): 分页改变的时候触发事件
  -->
  <pagination
    [totalItems]="bigTotalItems"
    [(ngModel)]="bigCurrentPage"
    [maxSize]="maxSize"
    class="pagination-sm"
    [boundaryLinks]="true"
    [rotate]="false"
    (pageChanged)="pageChanged($event)"
    (numPages)="numPages = $event"
  ></pagination>
</div>

child.component.ts

import {Component, Input, Output, EventEmitter} from "@angular/core";
@Component({
  selector: "page",
  templateUrl: "../templates/child.component.html"
})
export class PageComponent {
  maxSize:number;
  bigCurrentPage:number;
  numPages:number;

  // 父组件传递过来的变量
  @Input()
  bigTotalItems:number = 0; // 父组件传递过来的条目总数,获取到，会覆盖这个值

  // 发送给父组件的变量(1)
  @Output()
  currentPage = new EventEmitter();

  constructor() {
    this.maxSize = 5; // 最多显示页数,其余显示...
    // this.bigTotalItems = 200; // 总条目数
    console.log(this.bigTotalItems);
    this.bigCurrentPage = 1; // 刚加载初始化页
    this.numPages = 0; // 总分页数

  }

  public pageChanged(event) {
    // 将当前页传递给父组件(2)
    this.currentPage.emit(event.page);

    console.log('当前页: ' + event.page);
    console.log('每页显示条目: ' + event.itemsPerPage);
  }
}

father.component.html

<page [bigTotalItems]="total" (currentPage)="pageHandel($event)"></page>

fataher.component.ts

// 这里展示了从数据库获取所有用户信息的实例

import {Component, OnInit} from "@angular/core";
import {HttpServer} from "../servers/http.server";
import {URLSearchParams} from "@angular/http";
@Component({
  selector: "all-user",
  templateUrl: "../templates/all-user.component.html"
})
export class AllUserComponent implements OnInit {
  allUser:Array<Object>;
  age:number;
  sex:string;
  position:string;
  address:string;
  username:string;
  message:string;

  page:number;

  // 分页总数, @input 传递给子组件
  total:number;

  constructor(public httpServer:HttpServer) {
    this.allUser = [];
    this.username = "";
    this.age = 0;
    this.sex = "";
    this.position = "";
    this.address = "";
    this.message = "";

    this.total = 0;
    this.page = 1;
  }

  initHandel() {
    var url = "http://localhost:3000/all_user";
    var params = new URLSearchParams();
    params.set("page", this.page.toString());
    params.set("callback", "JSONP_CALLBACK");
    this.httpServer.jsonpGet(url, params).subscribe(res=> {
      console.log(res);
      this.allUser = res;

      // 这里使用 limit每次返回一些信息,默认当前页码为1, 所以返回数据中,返回总页码,比较重要。
      this.total = 18;
    });
  }

  ngOnInit() {
    this.initHandel();
  }

  // 定义函数获取子组件传递过来的参数, 这个函数会在,子组件中发射事件触发的时候调用。
  pageHandel(event) {
    this.page = event;
    console.log(event);
    this.initHandel();
  }
}