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);
}
}
