Ajax

DataTable 的資料基本上可以來自三個不同的位置

HTML - 非常適合當您的表格已經存在並已填入資料時。
Javascript 陣列 - 當您的資料存在於 Javascript 陣列中時使用
Ajax 資料來源

本手冊的這一節將說明如何使用最後一個選項，因為透過 Ajax 載入您的資料可能特別方便 - 例如，透過資料 HTTP API 饋送，或只是將您的表格資料邏輯與您的 HTML 分開。

使用 Ajax 載入資料的另一個優點是，您可以啟用 DataTables 的 deferRender 選項以提升效能 - 當啟用此選項時，將僅在需要在頁面上繪製時才建立 DOM 元素，從而減少首次將資料插入表格時的初始 CPU 負載。

載入資料

DataTables 載入 Ajax 資料的方式很簡單，只需使用 ajax 選項設定應該發出 Ajax 請求的 URL。例如，以下顯示了 Ajax 來源資料的最小配置

$('#myTable').DataTable( {
    ajax: '/api/myData'
} );

JSON 資料來源

當考慮 DataTables 的 Ajax 載入資料時，我們幾乎總是參考 JSON 有效負載 - 也就是說，從伺服器返回的資料採用 JSON 資料結構。這是因為 JSON 衍生自 Javascript，因此自然地與 DataTables 等 Javascript 函式庫配合良好。它也是一種緊湊且易於理解的資料格式，已證明在 Javascript 世界中非常受歡迎。

DataTables 可以使用其他資料格式，例如 XML 和 YAML，但這些格式需要先轉換為 Javascript 物件表示法 (即 JSON) 才能使用 - 這通常是透過使用 ajax.dataSrc 來完成的。本文檔的其餘部分將僅考慮 JSON。

對於我們的 JSON 資料來源，我們需要兩個關鍵資訊

表格中表示資料列的資料陣列在物件中的位置
每列的資料點在列物件/陣列中的位置。

資料陣列位置

DataTables 需要一個項目陣列來表示表格的資料，其中陣列中的每個項目都是一列。項目通常是一個物件或一個陣列（下面會更詳細地討論） - 因此我們需要做的第一件事是告訴 DataTables 該陣列在資料來源中的位置。

例如，請考慮下面左側顯示的三個 JSON 資料物件，您可以看到三個結構中的每一個都包含相同的資料，用於要在表格中顯示的資料陣列，但該陣列的位置在每個資料物件中都不同。每個都是完全有效的，並且可以在不同的情況下使用 - 沒有單一的「正確方式」！

ajax.dataSrc（即資料來源）選項用於告訴 DataTables 資料陣列在 JSON 結構中的位置。ajax.dataSrc 通常以字串形式給定，指示在 Javascript 物件表示法中的位置 - 即，只需將其設定為陣列所在的屬性名稱即可！空字串是一種特殊情況，它會告訴 DataTables 期望一個陣列（如上面的第一個範例）。

三個資料結構都顯示了它們對應的 DataTables 初始化。

1) 簡單的資料陣列

[
    {
        "name": "Tiger Nixon",
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25",
        "office": "Edinburgh",
        "extn": "5421"
    },
    ...
]

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: ''
    },
    columns: [ ... ]
} );

2) 具有 data 屬性的物件 - 請注意，此處顯示的 data 參數格式可以與簡化的 DataTables 初始化一起使用，因為 data 是 DataTables 在來源資料物件中尋找的預設屬性。

{
    "data": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        ...
    ]
}

$('#myTable').DataTable( {
    ajax: '/api/myData',
    columns: [ ... ]
} );

// or!

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: 'data'
    },
    columns: [ ... ]
} );

3) 具有 staff 屬性的物件

{
    "staff": [
        {
            "name": "Tiger Nixon",
            "position": "System Architect",
            "salary": "$320,800",
            "start_date": "2011/04/25",
            "office": "Edinburgh",
            "extn": "5421"
        },
        ...
    ]
}

$('#myTable').DataTable( {
    ajax: {
        url: '/api/myData',
        dataSrc: 'staff'
    },
    columns: [ ... ]
} );

欄資料點

現在 DataTables 知道從哪裡取得資料列的資料，我們還需要告訴它從哪裡取得該列中每個儲存格的資料 - 這是透過 columns.data 選項完成的。

讓我們再次考慮三種不同的資料格式，同樣顯示在左側 - 每個案例中僅顯示一列資料（即為了簡潔起見，它沒有包裝在上面討論的結構中）。

您可以看到，在這三個案例中的每一個案例中，都有相同的資料可用於該列，但 JSON 資料的結構不同。我們使用 columns.data 屬性來告訴 DataTables 從哪裡取得每欄的資料。

與上面討論的 ajax.dataSrc 選項一樣，columns.data 通常以字串形式給定，該字串表示 Javascript 點狀物件表示法中所需資料的位置。也可以以其他形式給定，例如用於存取陣列的索引。

右側顯示了三個資料結構的對應 DataTables 初始化。

1) 資料陣列 - 請注意，陣列選項不需要設定 columns.data 選項。這是因為 columns.data 的預設值是欄索引（即 0、1、2...）

[
    "Tiger Nixon",
    "System Architect",
    "$320,800",
    "2011/04/25",
    "Edinburgh",
    "5421"
]

$('#myTable').DataTable( {
    ajax: ...
} );

// or!

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 },
        { data: 3 },
        { data: 4 },
        { data: 5 }
    ]
} );

2) 資料物件

{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
}

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'salary' },
        { data: 'state_date' },
        { data: 'office' },
        { data: 'extn' }
    ]
} );

3) 巢狀物件 - 在這種情況下，請注意在巢狀物件中，我們使用點狀物件表示法 (例如 hr.position) 來存取巢狀資料。透過這種能力，幾乎任何 JSON 資料結構都可以與 DataTables 一起使用

{
    "name": "Tiger Nixon",
    "hr": {
        "position": "System Architect",
        "salary": "$320,800",
        "start_date": "2011/04/25"
    },
    "contact": {
        "office": "Edinburgh",
        "extn": "5421"
    }
}

$('#myTable').DataTable( {
    ajax: ...,
    columns: [
        { data: 'name' },
        { data: 'hr.position' },
        { data: 'hr.salary' },
        { data: 'hr.state_date' },
        { data: 'contact.office' },
        { data: 'contact.extn' }
    ]
} );

選用參數

除了資料列的資料外，DataTables 還可以使用每個資料列的資料來源物件上的以下選用參數，為您執行自動操作

參數名稱	類型	說明
`DT_RowId`	`字串`	將 `tr` 節點的 ID 屬性設定為此值
`DT_RowClass`	`字串`	將此類別新增至 `tr` 節點
`DT_RowData`	`物件`	使用 jQuery `data()` 方法將物件中包含的資料新增至列，以設定資料，然後也可以用於稍後的擷取（例如，在點擊事件上）。
`DT_RowAttr`	`物件`	將物件中包含的資料新增至列 `tr` 節點作為屬性。物件索引鍵用作屬性索引鍵，而值用作相應的屬性值。這是使用 jQuery `param()` 方法執行的。請注意，此選項需要 DataTables 1.10.5 或更新版本。

實際範例

DataTables 範例包含許多範例，說明 DataTables 如何讀取 Ajax 載入的資料。

Ajax 設定

為了完整討論我們的 Ajax 載入，值得說明的是，目前 DataTables 不幸地不支援透過 Ajax 進行設定。這將在未來進行審查，但是，JSON 沒有提供表示 Javascript 函式的選項，這在 DataTables 設定中可能非常有用，因此 Ajax 載入的設定無法使用 DataTables 提供的所有選項。