angular6 實作前台分頁

angular6 實作前台分頁（純js，無樣式）

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
//假資料
  tableList = [
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 },
    { name: '123', price: 120, num: 3 }
  ];
  tablePageList = [];  //分頁後前台顯示資料
  pageNo = 1; //目前頁碼
  preShow = false; //上一頁
  nextShow = true; //下一頁
  pageSize = 5; //單頁顯示數
  totalCount = 0; //總頁數
  pageSizes = [5, 10, 15]; 
  curPage = 1; //目前頁
  
  ngOnInit() {
    this.getPageList();
  }
  getPageList() {
    if (this.tableList.length >= 1) {
      if (this.tableList.length % this.pageSize === 0) {
        this.pageNo = Math.floor(this.tableList.length / this.pageSize);
      } else {
        this.pageNo = Math.floor(this.tableList.length / this.pageSize) + 1;
      }
      if (this.pageNo < this.curPage) {
        this.curPage = this.curPage - 1;
      }
      if (this.pageNo === 1 || this.curPage === this.pageNo) {
        this.preShow = this.curPage !== 1;
        this.nextShow = false;
      } else {
        this.preShow = this.curPage !== 1;
        this.nextShow = true;
      }
    } else {
      this.tableList.length = 0;
      this.pageNo = 1;
      this.curPage = 1;
    }
    this.tablePageList = this.tableList.slice((this.curPage - 1) * this.pageSize, (this.curPage) * this.pageSize);

  }
  //點選上一頁方法
  showPrePage() {
    this.curPage--;
    if (this.curPage >= 1) {
      this.getPageList();
    } else {
      this.curPage = 1;
    }
  }
//點選下一頁方法
  showNextPage() {
    this.curPage++;
    if (this.curPage <= this.pageNo) {
      this.getPageList();
    } else {
      this.curPage = this.pageNo;
    }
  }
//自定義跳頁方法
  onChangePage(value) {
    if (value > this.pageNo) {
      confirm('超出最大頁數');
    } else if (value <= 0) {
      this.curPage = 1;
      this.getPageList();
    } else {
      this.curPage = value;
      this.getPageList();
    }
  }
  //改變每頁顯示方法
  onChangePageSize(value) {
    this.pageSize = value;
    this.curPage = 1;
    this.getPageList();
  }
  
}

           

<table border="1">
    <thead>
        <tr>
            <th class="text-center">名稱</th>
            <th class="text-center">單價</th>
            <th class="text-center">數量</th>
            <th class="text-center">總價</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let list of tablePageList">
            <td>{{list.name}}</td>
            <td>{{list.price}}</td>
            <td>{{list.num}}</td>
            <td>{{list.price*list.num}}</td>
        </tr>
    </tbody>
</table>
<div>
    <button type="button" [disabled]="!preShow" (click)="showPrePage()">上一頁</button>
    <input type="text" (change)="onChangePage($event.target.value)" placeholder="{{curPage}}" value="{{curPage}}">
    <span> / {{pageNo}} 頁</span>
    <button type="button" [disabled]="!nextShow" (click)="showNextPage()">下一頁</button>
    <span> 每頁顯示 : </span>
    <select (change)="onChangePageSize($event.target.value)">
        <option *ngFor="let pageSize of pageSizes" value="{{pageSize}}">{{pageSize}}</option>
    </select>
</div>
<span>共{{tablePageList.length}}條</span>