var xURL = "./data/CPMP.json"; // 資料來源
var myDataTable = ''; // show tBody table (Tr/td)
var myData = []; // 接收 JSON資料讀取的陣列
//紀錄筆數、頁數、頁次
const pCount = 10; //單頁筆數
var recTotal = 0 //記錄總筆數
var pNoTotal = 0 //總頁數
var pNo = 1; //頁號碼
var min = 0; // 該頁 第一筆 紀錄的陣列 index
var max = 9; // 該頁 最後一筆 紀錄的陣列 index
// 頁號碼的群組
var myPageLi = ''; // show myPageNo UL -> LI
var pGroupTotal = 1;
var pGroupNo = 1; //每十頁為1Group
var pGroupMin = 1; // 該頁 第一筆 紀錄的陣列 index
var pGroupMax = 10; // 該頁 最後一筆 紀錄的陣列 index
二、讀取資料
//讀取資料的函式
myReadJOSNData();
function myReadJOSNData(){
$.getJSON(xURL,
function(data){
myData = data
// console.log(data)
// 總筆數
recTotal = data.length
pageInfo(); // page計算
showPage(1); // 秀頁群
showTable(1); // 秀資料
groupBtnCheck(); // 檢視按鈕
}
)
}
三、計算單頁 第一筆與最後一筆 紀錄的陣列 index
pNo = myPageNo; //單頁
min = (pNo-1)*pCount;
max = pNo*pCount-1;
// 小心別超出陣列限制
if (max > (recTotal -1)){
max = recTotal - 1;
}
四、頁號碼與頁群組的計算
// 計算頁數
if((recTotal%pCount) === 0 ){
pNoTotal = recTotal/pCount
}else{
pNoTotal = parseInt((recTotal/pCount))+1
}
$("#totalPage").text(pNoTotal);
$("#myCurrentPage").text(pNo);
// 計算頁群組
if((pNoTotal%10) === 0) {
pGroupTotal = pNoTotal / 10
}else{
pGroupTotal = parseInt(pNoTotal / 10) + 1;
}
$("#myPageGroup").text(pGroupTotal);
五、鎖定翻頁動作
if(pNo == pGroupMin){
// console.log("鎖定前一頁")
$("#prevBtn").attr("disabled",true);
}else {
$("#prevBtn").attr("disabled",false);
}
if(pNo == pGroupMax){
// console.log("鎖定前一頁")
$("#nextBtn").attr("disabled",true);
}else {
$("#nextBtn").attr("disabled",false);
}
六、處理 Page按鈕的 Active 狀態
var myPageBtn = document.getElementsByClassName("myPageItem");
for(var x = 0;x < myPageBtn.length;x++){
// console.log(myPageBtn[x].innerText);
if(pNo === parseInt(myPageBtn[x].innerText)){
myPageBtn[x].classList.add("active");
}else{
myPageBtn[x].classList.remove("active");
}
}
七、翻頁
// 資料翻頁(上一頁)
function prevPage(){
pNo--;
showTable(pNo);
}
// 資料翻頁(下一頁)
function nextPage(){
pNo++;
showTable(pNo);
}
// 資料翻頁(上10頁)
function prevGroupPage(){
pGroupNo--;
showPage(pGroupNo);
showTable(pGroupMin);
groupBtnCheck();
}
// 資料翻頁(下10頁)
function nextGroupPage(){
pGroupNo++;
showPage(pGroupNo);
showTable(pGroupMin);
groupBtnCheck();
}