文章標題有點長…
之前抓取Google試算表資料是搜尋特定欄位的資料,再透過API回傳資料
不然就是全部取回來,在前端透過 JavaScript控制要呈現的部分
這次的練習是利用jqPaginator ,來製作分頁功能列
主要的思路是
後端程式
初始階段回傳Google 試算表資料筆數換算的總頁數
接收前端觸發jqPaginator點取的特定頁數,回傳所包含的資料內容
前端程式
先取得總頁數來進行jqPaginator的初始設定
點取功能列的觸發行為,接收後端傳回來的資料
後端程式
18行
這個判斷是是配合前段傳來的值
如果是數字,就回傳頁數範圍的資料
如果不是數字,就回傳目前資料筆數的總頁數
34行
因為本來沒有考慮到如果最後一頁的情況,只想到每一頁都是10筆
後來發現,最後一頁的筆數小於10筆,會有空白值,所以用判斷式來處理
不過,應該可以直接用” Sheet.getSheetValues( dataFist, 1, LastRow – dataFist+1 , LastColumn)”;就可以了
51行
判斷總頁數,如果能被10整除,商數就是總頁數
如果會有餘數,那麼商數+1才是總頁數
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
function doGet(e) { /**/ Logger.log(e); var params = e.parameter; var page = params.page;// // var page = e; //配合 function test() Logger.log(page); //取得資料 var Sheet = SpreadsheetApp.openById(sId).getSheets()[0]; var LastRow = Sheet.getLastRow(); var LastColumn = Sheet.getLastColumn(); var data = [];//用來存資料 if (Number(page) > 0){ // 取得全部資料 var listAll = Sheet.getSheetValues(1, 1, LastRow, LastColumn); //存標題 var listA =[listAll[0][0],listAll[0][1],listAll[0][2],listAll[0][3],listAll[0][4],listAll[0][5],listAll[0][6],listAll[0][7],listAll[0][8]]; data.push({dataload: listA }) //第1列是標題,序號由0開始,設定JSON格式{dataload: listAll[0]} var dataFist = 10*(Number(page)-1)+2; var dataEnd = 10*(Number(page))+1; Logger.log(dataFist); Logger.log(dataEnd); //最後一頁抓取的資料筆數 if(LastRow < dataEnd){ var listData = Sheet.getSheetValues( dataFist, 1, LastRow - dataFist+1 , LastColumn); }else{ var listData = Sheet.getSheetValues( dataFist, 1, 10, LastColumn); } Logger.log(listData.length); for(var i = 0; i < listData.length; i++){ //第2列才是資料,序號由0開始 var listOne = [listData[i][0],listData[i][1],listData[i][2],listData[i][3],listData[i][4],listData[i][5],listData[i][6],listData[i][7],listData[i][8]] data.push({dataload: listOne}); //寫入資料 } //顯示資料 Logger.log(data); //將資料存成JSON格式並回傳 return ContentService.createTextOutput(JSON.stringify(data)).setMimeType(ContentService.MimeType.JSON); }else{ var rm = (Sheet.getLastRow()-1) % 10;//判斷是否需要加頁數 整除的商數即頁數 不能整除有餘數,頁數+1 if(rm == 0){ var allPage = parseInt( (Sheet.getLastRow()-1) /10 ); }else{ var allPage = parseInt( (Sheet.getLastRow()-1) /10 )+1; } Logger.log(allPage); return ContentService.createTextOutput(allPage); } } |
前端程式
Html
除了引用 Jquery 跟 Jqpaginator 之外,還必須引用 bootstrap(限定3開頭的版本)
因為最新版 Jqpaginator的功能列是程式庫自動產生,所以不需要額外設定
Jqpaginator使用了bootstrap的CSS樣式
Css
這邊主要是跳頁時,跑出一個搜尋的圖示
原因是抓資料的時間太久…撐個場面
JavaScript
這邊使用了 Promise語法
這是為了讓程式有同步處理的效果
雖然JavaScript本身是同步程式語言,但是在需要等待回傳的執行程式時
例如:Http request等非同步事件
會被移到最後處理,因此,整體程式運作就不如預期
不過後來覺得用CSS來控制要呈現的內容好像比較直覺
而且我想要達成的效果好像也跟同步處理沒什麼關係
(裡面的資料,除了日期、學校名稱之外,其他都是假的)()
See the Pen
jqPaginator_6 by 莊幸諺 (@trico109748007)
on CodePen.
小插曲
在引用JavaScript的函示庫時,我原本是直接引用 存放在jqPaginator網站的檔案
後來發現可以用UNPKG,這個網站跟cdnjs很類似,都是提供JavaScritp程式庫
但是只要知道程式庫在npm的名稱,就可以直接利用UNPKG的語法來取得檔案
相對而言比較方便