頁腳回呼
透過使用 DataTables 提供的標頭和頁腳回呼操作函式（headerCallback 和 footerCallback），可以執行一些強大且有用的資料操作函式，例如總結表格中的資料。
下面的範例顯示如何使用頁腳回呼來總計欄位的資料（包括可見和隱藏的資料），使用 column().data() API 方法，並使用 column().footer() 將值寫入頁腳。
| 名字 | 姓氏 | 職位 | 辦公室 | 薪資 |
|---|---|---|---|---|
| Tiger | Nixon | 系統架構師 | 愛丁堡 | $320,800 |
| Garrett | Winters | 會計 | 東京 | $170,750 |
| Ashton | Cox | 初級技術作者 | 舊金山 | $86,000 |
| Cedric | Kelly | 資深 Javascript 開發人員 | 愛丁堡 | $433,060 |
| Airi | Satou | 會計 | 東京 | $162,700 |
| Brielle | Williamson | 整合專員 | 紐約 | $372,000 |
| Herrod | Chandler | 銷售助理 | 舊金山 | $137,500 |
| Rhona | Davidson | 整合專員 | 東京 | $327,900 |
| Colleen | Hurst | Javascript 開發人員 | 舊金山 | $205,500 |
| Sonya | Frost | 軟體工程師 | 愛丁堡 | $103,600 |
| Jena | Gaines | 辦公室經理 | 倫敦 | $90,560 |
| Quinn | Flynn | 支援主管 | 愛丁堡 | $342,000 |
| Charde | Marshall | 區域總監 | 舊金山 | $470,600 |
| Haley | Kennedy | 資深行銷設計師 | 倫敦 | $313,500 |
| Tatyana | Fitzpatrick | 區域總監 | 倫敦 | $385,750 |
| Michael | Silva | 行銷設計師 | 倫敦 | $198,500 |
| Paul | Byrd | 財務長 (CFO) | 紐約 | $725,000 |
| Gloria | Little | 系統管理員 | 紐約 | $237,500 |
| Bradley | Greer | 軟體工程師 | 倫敦 | $132,000 |
| Dai | Rios | 人事主管 | 愛丁堡 | $217,500 |
| Jenette | Caldwell | 開發主管 | 紐約 | $345,000 |
| Yuri | Berry | 行銷長 (CMO) | 紐約 | $675,000 |
| Caesar | Vance | 售前支援 | 紐約 | $106,450 |
| Doris | Wilder | 銷售助理 | 雪梨 | $85,600 |
| Angelica | Ramos | 執行長 (CEO) | 倫敦 | $1,200,000 |
| Gavin | Joyce | 開發人員 | 愛丁堡 | $92,575 |
| Jennifer | Chang | 區域總監 | 新加坡 | $357,650 |
| Brenden | Wagner | 軟體工程師 | 舊金山 | $206,850 |
| Fiona | Green | 營運長 (COO) | 舊金山 | $850,000 |
| Shou | Itou | 區域行銷 | 東京 | $163,000 |
| Michelle | House | 整合專員 | 雪梨 | $95,400 |
| Suki | Burks | 開發人員 | 倫敦 | $114,500 |
| Prescott | Bartlett | 技術作者 | 倫敦 | $145,000 |
| Gavin | Cortez | 團隊領導 | 舊金山 | $235,500 |
| Martena | Mccray | 售後支援 | 愛丁堡 | $324,050 |
| Unity | Butler | 行銷設計師 | 舊金山 | $85,675 |
| Howard | Hatfield | 辦公室經理 | 舊金山 | $164,500 |
| Hope | Fuentes | 秘書 | 舊金山 | $109,850 |
| Vivian | Harrell | 財務主管 | 舊金山 | $452,500 |
| Timothy | Mooney | 辦公室經理 | 倫敦 | $136,200 |
| Jackson | Bradshaw | 董事 | 紐約 | $645,750 |
| Olivia | Liang | 支援工程師 | 新加坡 | $234,500 |
| Bruno | Nash | 軟體工程師 | 倫敦 | $163,500 |
| Sakura | Yamamoto | 支援工程師 | 東京 | $139,575 |
| Thor | Walton | 開發人員 | 紐約 | $98,540 |
| Finn | Camacho | 支援工程師 | 舊金山 | $87,500 |
| Serge | Baldwin | 資料協調員 | 新加坡 | $138,575 |
| Zenaida | Frank | 軟體工程師 | 紐約 | $125,250 |
| Zorita | Serrano | 軟體工程師 | 舊金山 | $115,000 |
| Jennifer | Acosta | 初級 Javascript 開發人員 | 愛丁堡 | $75,650 |
| Cara | Stevens | 銷售助理 | 紐約 | $145,600 |
| Hermione | Butler | 區域總監 | 倫敦 | $356,250 |
| Lael | Greer | 系統管理員 | 倫敦 | $103,500 |
| Jonas | Alexander | 開發人員 | 舊金山 | $86,500 |
| Shad | Decker | 區域總監 | 愛丁堡 | $183,000 |
| Michael | Bruce | Javascript 開發人員 | 新加坡 | $183,000 |
| Donna | Snider | 客戶支援 | 紐約 | $112,000 |
| 總計 | ||||
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
下面顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ footerCallback: function (row, data, start, end, display) { var api = this.api(); // 移除格式設定以取得加總的整數資料 var intVal = function (i) { return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0; }; // 所有頁面的總計 total = api .column(4) .data() .reduce(function (a, b) { return intVal(a) + intVal(b); }, 0); // 此頁面的總計 pageTotal = api .column(4, { page: 'current' }) .data() .reduce(function (a, b) { return intVal(a) + intVal(b); }, 0); // 更新頁腳 $(api.column(4).footer()).html( '$' + pageTotal + ' ( $' + total + ' 總計)' ); } });
new DataTable('#example', { footerCallback: function (row, data, start, end, display) { let api = this.api(); // 移除格式設定以取得加總的整數資料 let intVal = function (i) { return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0; }; // 所有頁面的總計 total = api .column(4) .data() .reduce((a, b) => intVal(a) + intVal(b), 0); // 此頁面的總計 pageTotal = api .column(4, { page: 'current' }) .data() .reduce((a, b) => intVal(a) + intVal(b), 0); // 更新頁腳 api.column(4).footer().innerHTML = '$' + pageTotal + ' ( $' + total + ' 總計)'; } });
除了上述程式碼，還載入了以下 Javascript 函式庫檔案以供此範例中使用
下面顯示的 HTML 是原始 HTML 表格元素，在經過 DataTables 增強之前
此範例除了從函式庫檔案載入的 CSS 之外（如下所示），還使用了一些額外的 CSS，以便正確顯示表格。使用的額外 CSS 如下所示
th { white-space: nowrap; }
以下 CSS 函式庫檔案已載入以供此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。已載入的最新資料如下所示。當載入任何額外資料時，此資料將自動更新。
下面顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，並使用 DataTables 文件中描述的協定。