Google 教學：使用 DataTable 輕鬆展示試算表內容（含分頁、搜尋、排序與變色功能）

您是否曾經想在網站上分享 Google 試算表的內容，卻苦於其原生介面不夠美觀或功能不足？當資料量一大，使用者很難快速找到他們想要的資訊。

今天，我們要分享一個強大的解決方案：結合 Google Apps Script 和一個名為 DataTable 的 JavaScript 套件，將您的 Google 試算表資料，轉變為一個具備分頁、關鍵字即時搜尋、欄位排序、搜尋字詞變色等多功能的專業表格。最棒的是，大部分的複雜功能都由 DataTable 幫您完成了，您只需要簡單的幾個步驟就能實現！

成果展示

完成後，您的網頁將能像這樣展示試算表資料，提供極佳的使用者體驗。

• 分頁功能：自動將大量資料分頁，可自訂每頁顯示筆數。

• 即時搜尋：右上角搜尋框可針對所有欄位進行即時關鍵字篩選。

• 關鍵字變色：搜尋到的關鍵字會自動以黃色標示，一目了然。

• 欄位排序：點擊任一欄位標題，即可對該欄位進行升冪或降冪排序。

教學資源連結

在開始之前，請先準備好以下三個連結，這將是我們本次教學的核心資源。

1. 前端程式碼 (HTML/JavaScript)：

   • https://drive.google.com/file/d/1LKqhpLVH0sW1_n0hss1l1rqgFXlBxbTT/view

2. 後端 Google 試算表 (請建立副本後使用)：

   • https://docs.google.com/spreadsheets/d/1sYfYSrSowmPvp-tsy7-1ossnooKSeVj5-FRI3WWAMkY/copy

3. 範例網站 (Demo Site)：

   • https://sites.google.com/view/timingho/shopee

---

教學步驟

跟著以下步驟，您也能輕鬆打造自己的互動式資料表格。

步驟一：建立後端試算表副本

首先，點擊上方的「後端 Google 試算表」連結。瀏覽器會自動提示您「要建立副本嗎？」。請點擊藍色的 [建立副本] 按鈕。

這會將範本試算表完整複製一份到您自己的 Google 雲端硬碟中，確保您擁有完整的編輯權限。

小技巧：範本中有兩個工作表，工作表1 是原始資料，顯示頁 則是透過 QUERY 函數從 工作表1 抓取並隨機排序資料。您可以直接修改 工作表1 的內容，顯示頁 會自動更新，前端網站也會同步更新，無需修改任何程式碼！

步驟二：部署 Apps Script 成為網頁應用程式

1. 在您剛剛建立的試算表副本中，點擊上方選單的 [擴充功能] > [Apps Script]。

2. 進入 Apps Script 編輯器後，點擊右上角的藍色按鈕 [部署] > [管理部署作業]。

3. 因為是第一次部署，請點擊 [建立部署作業]。

4. 在「誰可以存取」的下拉選單中，務必選擇 [任何人]，這樣您的網站才能公開讀取資料。

5. 點擊 [部署]。

6. 此時會跳出授權視窗，點擊 [授予存取權]，並選擇您的 Google 帳戶。

7. 接著會出現「Google 尚未驗證這個應用程式」的警告畫面，請點擊 [進階]，然後點擊下方的「前往 蝦皮分潤 (不安全)」。

8. 最後點擊 [允許]，完成授權。

步驟三：取得網頁應用程式 URL

授權成功後，您會看到一個「網頁應用程式」的 URL。這就是您試算表的專屬資料 API 接口。請點擊旁邊的 [複製] 按鈕，將這個網址複製下來，我們下一步會用到。

步驟四：修改前端程式碼並嵌入網站

1. 點擊文章開頭的「前端程式碼」連結，並將所有程式碼複製下來。

2. 前往您的 Google Sites 網站（或任何支援嵌入 HTML 的平台）。

3. 在您想放置表格的頁面，使用 [嵌入] > [嵌入程式碼] 功能。

4. 將剛剛複製的前端程式碼全部貼上。

5. 找到程式碼中段的這一段：

   codeJavaScript

   // ↓↓↓底下請改成您自己的url
   var url="https://script.google.com/macros/s/AKfycbw/..../exec"; 
   // ↑↑↑上面請改成您自己的url

6. 將引號 " 內的網址，替換成您在 步驟三 複製的網頁應用程式 URL。

7. 點擊 [下一步] > [插入]。

步驟五：發佈與測試

將嵌入的區塊調整到適當的大小，然後點擊 [發佈] 您的網站。現在打開您的網站頁面，一個功能齊全的互動式表格就完成了！

您可以試著點擊欄位標題排序、在右上角輸入關鍵字搜尋，體驗 DataTable 帶來的便利。

希望這個教學對您有幫助！透過這個方法，您可以將任何試算表資料（例如：產品列表、活動清單、聯絡人名冊）以更專業、更友善的方式呈現給您的網站訪客。