為欄位產生內容
在某些表格中，您可能希望自動產生一些內容。這可以透過多種方式完成
-
columns.render用於動態內容 (即基於該列的資料) -
columns.defaultContent用於靜態內容 (即簡單的字串)
此範例顯示如何使用 columns.defaultContent 在表格的最後一欄建立一個按鈕元素。一個簡單的 click 事件監聽器用於監聽列中按鈕上的點擊，並且當被觸發時，使用 row().data() 方法取得該列的資料，並在 alert 方塊中顯示一些關於它的資訊。這是一個簡單的用例，但它可以建構成任意複雜。
另請注意，該欄的 columns.data 選項已設定為 null，表示該欄在資料來源物件中不包含任何資訊。
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 註解
下面顯示的 Javascript 用於初始化此範例中顯示的表格
var table = $('#example').DataTable({ ajax: 'data/arrays.txt', columnDefs: [ { data: null, defaultContent: '<button>點擊!</button>', targets: -1 } ] }); $('#example tbody').on('click', 'button', function () { var data = table.row($(this).parents('tr')).data(); alert(data[0] + "'s salary is: " + data[5]); });
var table = new DataTable('#example', { ajax: 'data/arrays.txt', columnDefs: [ { data: null, defaultContent: '<button>點擊!</button>', targets: -1 } ] }); table.on('click', 'button', function (e) { let data = table.row(e.target.closest('tr')).data(); alert(data[0] + "'s salary is: " + data[5]); });
除了上面的程式碼之外，還載入下列 Javascript 函式庫檔案以供此範例中使用
下面顯示的 HTML 是原始 HTML 表格元素，在它被 DataTables 增強之前
此範例使用了一些從函式庫檔案載入的額外 CSS (如下)，以便正確顯示表格。使用的額外 CSS 顯示如下
以下 CSS 函式庫檔案已載入，以供此範例中使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示的是已載入的最新資料。當載入任何額外資料時，此資料將自動更新。
用於執行此表格伺服器端處理的腳本如下所示。請注意，這只是一個使用 PHP 的範例腳本。伺服器端處理腳本可以使用任何語言編寫，並使用DataTables 文件中描述的協定。