正交數據

資料是複雜的。不僅您表格中顯示的資料會有規則，說明每個資料點如何與表格中的其他資料點對應，而且每個資料點本身都可以採用多種形式。例如，考慮貨幣資料；為了顯示，它可能會以貨幣符號和千位分隔符格式化顯示，而排序應該以數值方式進行，並且在資料上的搜尋將接受任何一種形式。

在 DataTables 中，我們將此稱為正交數據。

DataTables 具有四種內建的資料操作，每種操作都可能使用正交（獨立）資料來源。這四種操作是

display - 顯示資料
sort - 用於排序的資料
filter - 用於搜尋的資料
type - 類型偵測資料

預設情況下，DataTables 將對所有四種操作使用相同的資料，但是可以使用 data 和 columns.render 初始化選項或 HTML 5 data-* 屬性輕鬆修改。

資料來源

表格的正交數據可以通過資料來源陣列/物件提供（請注意，使用物件容易得多，因為您不需要記住陣列索引！），作為預定義的值（通常使用 ajax 載入的資料或 Javascript 提供的資料來源完成），或者它們可以在需要時動態計算。

預定義值

如果您的資料來源已經具有您希望顯示的正交資料，DataTables 可以通過將 columns.data 和/或 columns.render 選項作為物件提供來直接使用它。

例如，考慮以下日期結構 - 請注意，start_date 物件有一個格式良好的 display 屬性，它將用於在表格中顯示資料，還有一個 timestamp 屬性。在這種情況下，這很有用，因為為日期顯示選擇的格式不易排序

{
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303682400"
    },
    "office":     "Edinburgh"
}

為了在此格式的表格中使用資料，我們可以為 columns 或 columnDefs 欄描述使用以下選項

{
    data: 'start_date',
    render: {
        _: 'display',
        sort: 'timestamp'
    }
}

請注意，使用 columns.data 或 columns.render 作為物件時，必須定義 _ 屬性。如果未定義資料選項，則 _ 屬性是「後備」(例如，上述物件中沒有 display 選項)。

請參閱此範例的實際操作.

計算值

如果您的資料來源不包含預先格式化的正交資料，則可以將 columns.data 和 columns.render 選項作為函數提供。這些函數將用於計算顯示所需的資料。

例如，考慮以下資料結構

{
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "start_date": "1303682400",
    "office":     "Edinburgh"
}

雖然開始日期的格式很好，適合電腦使用，但對於人類來說幾乎沒有用處。為了解決這個問題，我們可以使用 columns.render 作為函數來計算要顯示的值 - columns.data 選項會告知渲染器要使用什麼資料

{
    data: 'start_date',
    render: function ( data, type, row ) {
        // If display or filter data is requested, format the date
        if ( type === 'display' || type === 'filter' ) {
            var d = new Date( data * 1000 );
            return d.getDate() +'-'+ (d.getMonth()+1) +'-'+ d.getFullYear();
        }

        // Otherwise the data type requested (`type`) is type detection or
        // sorting data, for which we want to use the integer, so just return
        // that, unaltered
        return data;
    }
}

有關將渲染器與 DataTables 一起使用的更多資訊，請參閱渲染器手冊頁面和 columns.render 參考文件。

HTML 5

如果您使用 ajax 載入資料，則使用資料來源中的正交資料的上述方法非常棒，但如果您的表格已經存在於 HTML 中，則沒有那麼有用。對於這種情況，DataTables 支援 data-* 屬性，這些屬性可用於保存 DOM 中可見但最終使用者不可見的資訊。

DataTables 將自動偵測 HTML 儲存格上的以下屬性

data-sort 和 data-order - 用於排序資料
data-filter 或 data-search - 用於搜尋資料

例如，考慮以下 HTML 表格列

<tr>
    <td data-search="Tiger Nixon">T. Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td data-order="1303682400">Mon 25th Apr 11</td>
    <td data-order="3120">$3,120/m</td>
</tr>

請注意

第一欄具有 data-search 屬性，允許在這種情況下進行全名搜尋，而顯示則顯示簡寫形式。
第五欄有一個無法直接排序的日期，因此使用 data-order 來提供排序的 unix 時間表示。
第六欄也使用 data-order，在這種情況下，提供格式化數字的數值形式。

為了使 HTML 5 data-* 屬性偵測和處理正常工作，欄中的所有儲存格都必須具有相同的可用屬性。如果沒有此項，DataTables 將發出警告。

請參閱此範例的實際操作

API 介面

當 DataTables 從 HTML 表格讀取資料時，預設情況下它會將每一列中的資料讀入陣列（儘管可以使用使用 columns.data 進行自訂）。當軟體偵測到正交 HTML5 屬性時，它會將資訊讀入物件，允許每個儲存格有多個資料點（如果需要）。

如果儲存格存在正交資料，則儲存格的內容（即使用者看到的內容）將被複製到 display 屬性中。 HTML5 屬性會被複製到與屬性名稱相同的屬性中，但帶有 @ 前置字元。

如果我們繼續上面的範例，它將使用以下結構讀取

{
    "0": {
        "display": "T. Nixon",
        "@data-search": "Tiger Nixon"
    },
    "1": "System Architect",
    "2": "Edinburgh",
    "3": "61",
    "4": {
        "display": "Mon 25th Apr 11",
        "@data-order": "1303682400"
    },
    "5": {
        "display": "$3,120/m",
        "@data-order": "3120"
    }
}

如果您不使用 DataTables API 來操作表格中的資料，您將永遠不需要知道資料的結構。但是，如果您想將資料讀回（例如，使用 row().data()）或新增一個新的資料列 (row.add())，您需要確保您使用的資料結構與 DataTables 讀取資料的結構相同。如果沒有，您將會收到 請求的未知參數 錯誤。

要檢查 DataTables 用於行的資料結構，請使用 console.log( myTable.row(':eq(0)').data() ); 顯示表格中第一行的資料。