新增列
可以使用 row.add() API 方法將新列新增至 DataTable。只需使用新列的資料（陣列或物件）呼叫 API 函式即可。可以使用 rows.add() 方法（請注意複數形式）新增多列。同樣可以使用 row().data() 和 row().remove() 方法來更新資料。
請注意，為了在表格中看到新列，您必須呼叫 draw() 方法，這可以透過 DataTables API 採用的鏈式調用方式輕鬆完成。
這個範例顯示每次點擊下面的按鈕時，都會新增單一列。
Editor 擴充功能為 DataTable 增加了完整的表格編輯控制，包括建立、編輯和刪除列。
| 欄位 1 | 欄位 2 | 欄位 3 | 欄位 4 | 欄位 5 |
|---|---|---|---|---|
| 欄位 1 | 欄位 2 | 欄位 3 | 欄位 4 | 欄位 5 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
以下顯示的 Javascript 用於初始化此範例中顯示的表格
var table = $('#example').DataTable(); var counter = 1; $('#addRow').on('click', function () { table.row .add([ counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5' ]) .draw(false); counter++; }); // 自動新增第一列資料 $('#addRow').click();
function addNewRow() { table.row .add([ counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5' ]) .draw(false); counter++; } const table = new DataTable('#example'); let counter = 1; document.querySelector('#addRow').addEventListener('click', addNewRow); // 自動新增第一列資料 addNewRow();
除了上述程式碼外，還載入了以下 Javascript 函式庫檔案以用於此範例
以下顯示的 HTML 是原始的 HTML 表格元素，在 DataTables 強化之前
這個範例除了從函式庫檔案（如下）載入的 CSS 外，還使用了一些額外的 CSS 來正確顯示表格。使用的額外 CSS 如下所示
載入了以下 CSS 函式庫檔案以用於此範例，以提供表格的樣式
此表格透過 Ajax 載入資料。以下顯示已載入的最新資料。此資料會在載入任何額外資料時自動更新。
以下顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。可以使用任何語言編寫伺服器端處理腳本，並使用 DataTables 文件中描述的協定。