Angular2 表格分頁模組

import { Component } from '@angular/core';

@Component({

selector: 'app-pagging-table',

templateUrl: './pagging-table.component.html',

styleUrls: ['./pagging-table.component.css']

})

export class PaggingTableComponent {

// 待辦清單 開始 結束與限制筆數

taskStart = 0;

taskEnd = 0;

taskLimit = 10;

// 待辦清單 目前頁數 總頁數與總筆數

taskCurrentPage = 1;

taskTotalPage = 0;

taskMaxcount = 0;

// 數字轉陣列

Arr = Array;

// 顯示 -> 文字

showText = '顯示';

// 到 -> 文字

toText = '～';

// 共 -> 文字

totalText = '共';

// 筆 -> 文字

countText = '筆';

// 下一頁 -> 文字

nextText = '下一頁';

// 上一頁 -> 文字

prevText = '上一頁';

// 設定表格資料載入完成後需要做的事情

private tableLoadCallback;

// 設定頁面載入完成後需要做的事情

private ngAfterViewInit_Callback;

// 建構子

constructor() {

// 建立預設方法 設定表格資料載入完成後需要做的事情

this.tableLoadCallback = function () {

console.error('力煒-表格分頁功能錯誤，表格資料載入完成後需要做的事情 必須重新定義 -> setTableLoadCallback');

};

// 建立預設方法 設定頁面載入完成後需要做的事情

this.ngAfterViewInit_Callback = function() {

console.error('力煒-表格分頁功能錯誤，設定頁面載入完成後需要做的事情 必須加入物件的 ngAfterViewInit()');

};

}

// 設定頁面載入完成後需要做的事情

getNgAfterViewInit_Callback(tableId: string) {

this.ngAfterViewInit_Callback = () => {

// 確認分頁資訊物件存在

if ($('.dataTables_info').length === 0) {

// tslint:disable-next-line:max-line-length

console.error('力煒-表格分頁功能錯誤，必須新增 >> <div class="dataTables_info" id="task-list_info" role="status" aria-live="polite">{{_paggingTable.showText}} {{_paggingTable.taskStart}} {{_paggingTable.toText}} {{_paggingTable.taskEnd}} {{_paggingTable.totalText}} {{_paggingTable.taskMaxcount}} {{_paggingTable.countText}}</div>');

}

// 確認分頁資訊物件存在

if ($('.dataTables_paginate').length === 0) {

console.error(

`力煒-表格分頁功能錯誤，必須新增 >>

<div class="dataTables_paginate paging_simple_numbers" id="task-list_paginate">

<a class="paginate_button previous" (click)="_paggingTable.prevPage()">{{_paggingTable.prevText}}</a>

<span>

<a class="paginate_button" (click)="_paggingTable.goToPage(i + 1)" *ngFor="let data of _paggingTable.Arr(_paggingTable.taskTotalPage); let i = index">{{i + 1}}</a>

</span>

<a class="paginate_button next" (click)="_paggingTable.nextPage()">{{_paggingTable.nextText}}</a>

</div>`

);

}

// 確認表格存在

if ($('#' + tableId).length === 0) {

console.error(`力煒-表格分頁功能錯誤，指定編號的表格不存在`);

} else {

$('#' + tableId).parent().addClass('dataTables_wrapper');

$('#' + tableId).addClass('dataTable no-footer');

}

};

return this.ngAfterViewInit_Callback;

}

// 上一頁

prevPage() {

// 如果不能再上一頁了

if (this.taskCurrentPage === 1) {

return;

}

// 設定參數

this.taskStart = (this.taskStart - this.taskLimit < 0) ? 0 : this.taskStart - this.taskLimit;

this.taskCurrentPage = (this.taskCurrentPage - 1 < 1) ? 1 : this.taskCurrentPage - 1;

this.tableLoadCallback();

// 設定當前頁碼顯示

this.setCurrentPage_UI(this.taskCurrentPage);

}

// 下一頁

nextPage() {

// 如果不能再下一頁

if (this.taskCurrentPage === this.taskTotalPage) {

return;

}

// 設定參數

this.taskStart = (this.taskStart + this.taskLimit < 0) ? 0 : this.taskStart + this.taskLimit;

this.taskCurrentPage = (this.taskCurrentPage + 1 < 1) ? 1 : this.taskCurrentPage + 1;

this.tableLoadCallback();

// 設定當前頁碼顯示

this.setCurrentPage_UI(this.taskCurrentPage);

}

// 跳轉頁面

goToPage(page: number) {

// 如果點擊的頁面是當前頁面 就不重新載入

if (page === this.taskCurrentPage) {

return;

}

// 計算參數並重新整理

this.taskStart = (1 + (this.taskLimit * (page - 1)) < 0) ? 0 : 1 + (this.taskLimit * (page - 1));

this.taskCurrentPage = page;

this.tableLoadCallback();

// 設定當前頁碼顯示

this.setCurrentPage_UI(this.taskCurrentPage);

}

// 設定當前頁碼顯示

setCurrentPage_UI(page: number) {

// ngFor 可能有短暫的延遲

setTimeout(function() {

$('a.paginate_button').removeClass('current');

$('a.paginate_button:contains("' + page.toString() + '")').addClass('current');

}, 10);

}

// 設定表格資料載入完成後需要做的事情

setTableLoadCallback(callback: any) {

this.tableLoadCallback = callback;

}

// 回傳帶有 start limit 的網址

setStartAndLimit_ByUrl(url: string) {

// 起始筆數參數

if (url.includes('?')) {

url = url + '&start=' + this.taskStart;

} else {

url = url + '?start=' + this.taskStart;

}

// 限制筆數參數

if (url.includes('?')) {

url = url + '&limit=' + this.taskLimit;

} else {

url = url + '?limit=' + this.taskLimit;

}

return url;

}

// 設定分頁初始化(0筆的情況)

setPaggingTable_NoData() {

// 設定目前頁數

this.taskCurrentPage = 1;

// 設定總頁數

this.taskTotalPage = 0;

// 設定從第幾筆開始

this.taskStart = 0;

// 設定總筆數

this.taskMaxcount = 0;

// 設定當前頁碼顯示

this.setCurrentPage_UI(this.taskCurrentPage);

}

// 設定分頁有資料

setPaggingTable_Data(count: number, maxCount: number) {

// 最大數量

this.taskMaxcount = (maxCount) ? maxCount : count;

// 設定總頁數

this.taskTotalPage = Math.ceil(this.taskMaxcount / this.taskLimit);

// 設定從第幾筆開始

this.taskStart = 1 + ((this.taskCurrentPage - 1) * this.taskLimit);

// 設定單頁總共幾筆

let tempEnd = (this.taskStart - 1) + (this.taskCurrentPage - 1) * (this.taskLimit);

tempEnd = (tempEnd === 0) ? this.taskLimit : tempEnd;

this.taskEnd = (maxCount < tempEnd) ? maxCount : tempEnd;

// 設定總筆數

this.taskMaxcount = maxCount;

// 設定當前頁碼顯示

this.setCurrentPage_UI(this.taskCurrentPage);

}

}