JS / 以Google sheets作為資料庫,透過Google Apps Sript製作API,結合jqPaginator 製作資料分頁

文章標題有點長…

之前抓取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的語法來取得檔案 

相對而言比較方便

參考資料

JavaScript Promise 全介紹

jQuery 分页插件 : jqPaginator

jqPaginator

Unpkg 简介