表單輸入
為了執行分頁、排序、搜尋等操作，DataTables 可以從文件中移除列和單元格（即，不將不需要的列/單元格插入到文件中）。這提高了效能和相容性，但是，這意味著提交跨多個頁面的表單需要額外的工作來獲取不再在文件中的資訊。
可以使用 $() 方法從文件中獲取節點，無論分頁、排序等情況如何。此範例顯示如何使用 $() 來取得表格中的所有 input 元素。在此範例中，使用簡單的 alert() 來顯示表單中的資訊，但可以輕鬆地執行 Ajax 呼叫，將表單資料傳送到伺服器。
如果您對 DataTables 的完整 CRUD 編輯套件感興趣，請查看 Editor 擴充功能，它提供了簡單的設定和與 DataTables 的完整整合。
| 姓名 | 年齡 | 職位 | 辦公室 |
|---|---|---|---|
| Tiger Nixon | |||
| Garrett Winters | |||
| Ashton Cox | |||
| Cedric Kelly | |||
| Airi Satou | |||
| Brielle Williamson | |||
| Herrod Chandler | |||
| Rhona Davidson | |||
| Colleen Hurst | |||
| Sonya Frost | |||
| Jena Gaines | |||
| Quinn Flynn | |||
| Charde Marshall | |||
| Haley Kennedy | |||
| Tatyana Fitzpatrick | |||
| Michael Silva | |||
| Paul Byrd | |||
| Gloria Little | |||
| Bradley Greer | |||
| Dai Rios | |||
| Jenette Caldwell | |||
| Yuri Berry | |||
| Caesar Vance | |||
| Doris Wilder | |||
| Angelica Ramos | |||
| Gavin Joyce | |||
| Jennifer Chang | |||
| Brenden Wagner | |||
| Fiona Green | |||
| Shou Itou | |||
| Michelle House | |||
| Suki Burks | |||
| Prescott Bartlett | |||
| Gavin Cortez | |||
| Martena Mccray | |||
| Unity Butler | |||
| Howard Hatfield | |||
| Hope Fuentes | |||
| Vivian Harrell | |||
| Timothy Mooney | |||
| Jackson Bradshaw | |||
| Olivia Liang | |||
| Bruno Nash | |||
| Sakura Yamamoto | |||
| Thor Walton | |||
| Finn Camacho | |||
| Serge Baldwin | |||
| Zenaida Frank | |||
| Zorita Serrano | |||
| Jennifer Acosta | |||
| Cara Stevens | |||
| Hermione Butler | |||
| Lael Greer | |||
| Jonas Alexander | |||
| Shad Decker | |||
| Michael Bruce | |||
| Donna Snider | |||
| 姓名 | 年齡 | 職位 | 辦公室 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
var table = $('#example').DataTable({ columnDefs: [ { orderable: false, targets: [1, 2, 3] } ] }); $('#submit').on('click', function (e) { e.preventDefault(); var data = table.$('input, select').serialize(); alert( '以下資料將被提交到伺服器：\n\n' + data.substr(0, 120) + '...' ); });
除了上面的程式碼外，還載入了以下 Javascript 函式庫檔案供本範例使用
下面顯示的 HTML 是原始的 HTML 表格元素，在它被 DataTables 增強之前
此範例使用了一些額外的 CSS，超出從函式庫檔案載入的 CSS（如下所示），以便正確顯示表格。以下顯示了使用的額外 CSS
載入以下 CSS 函式庫檔案供本範例使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示了已載入的最新資料。當載入任何額外資料時，此資料將自動更新。
下面顯示了用於執行此表格伺服器端處理的腳本。請注意，這僅是一個使用 PHP 的範例腳本。可以使用任何語言編寫伺服器端處理腳本，使用 DataTables 文件中描述的協定。