巢狀物件資料 (陣列)
從 Ajax 資料來源讀取的資訊可能任意複雜，但仍然可以透過 columns.data 選項顯示在 DataTables 中，這對於處理已經定義格式的 JSON 饋送特別有用。
columns.data 選項不僅能夠從物件讀取資訊，還可以使用與物件相同的點式物件語法從陣列讀取資訊。 除此之外，當使用陣列資料來源時，columns.data 可以處理資料，以簡單的形式組合和顯示資料 (更複雜的形式可以使用 columns.data 作為函數來定義)。
此範例顯示使用 columns.data 讀取陣列的兩個不同方面
- 姓名欄位來源於兩個元素的陣列 (名字和姓氏)，它們會自動串連在一起。這是透過使用陣列方括號語法完成的，括號之間的字元會被用作元素之間的膠水 (例如
name[, ])。 - 職位、開始日期 和 薪資 欄位是使用點式物件表示法直接從陣列元素讀取的 (例如
hr.0)。 請注意，資料在欄位中使用的順序不必與資料來源中定義的順序一致。 在此範例中，列資料來源的結構是
{
"name": [
"Nixon",
"Tiger"
],
"hr": [
"System Architect",
"$3,120",
"2011/04/25"
],
"office": "Edinburgh",
"extn": "5421"
}
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
|---|---|---|---|---|---|
| 姓名 | 職位 | 辦公室 | 分機 | 開始日期 | 薪資 |
- Javascript
- HTML
- CSS
- Ajax
- 伺服器端腳本
- 評論
下面顯示的 Javascript 用於初始化此範例中顯示的表格
$('#example').DataTable({ ajax: 'data/objects_subarrays.txt', columns: [ { data: 'name[, ]' }, { data: 'hr.0' }, { data: 'office' }, { data: 'extn' }, { data: 'hr.2' }, { data: 'hr.1' } ] });
new DataTable('#example', { ajax: 'data/objects_subarrays.txt', columns: [ { data: 'name[, ]' }, { data: 'hr.0' }, { data: 'office' }, { data: 'extn' }, { data: 'hr.2' }, { data: 'hr.1' } ] });
除了以上程式碼之外，還載入了以下 Javascript 函式庫檔案以供此範例使用
下面顯示的 HTML 是原始 HTML 表格元素，在它被 DataTables 增強之前
此範例除了從函式庫檔案載入的 CSS (如下所示) 外，還使用了一些額外的 CSS，以便正確顯示表格。使用的額外 CSS 如下所示
載入了以下 CSS 函式庫檔案以供此範例使用，以提供表格的樣式
此表格透過 Ajax 載入資料。下面顯示已載入的最新資料。 當載入任何其他資料時，此資料將自動更新。
下面顯示用於執行此表格伺服器端處理的腳本。請注意，這只是一個使用 PHP 的範例腳本。 伺服器端處理腳本可以使用任何語言編寫，使用 DataTables 文件中描述的協定。