2011 年 5 月 1 日星期日

使用 DataTables 擴展的數據源選項

更新：這篇部落格文章是在 DataTables 1.10 發布之前撰寫的，因此沒有使用最新 DataTables 版本的新 API 或功能，特別是 columns.render 和 columns.data 選項。這篇文章保留作歷史參考；請參考手冊以了解 DataTables 目前版本的資訊。

歡迎來到 DataTables 新的部落格！我希望使用網站的這個部分來介紹各種對 DataTables 有用的主題，並提供關於如何將 DataTables 的一些更進階功能整合到您的網站中的教學。

在我的第一篇文章中，我想介紹 DataTables 即將發布的 1.8 版本（目前處於測試階段：這裡提供下載）中的新功能之一 - 擴展的數據源選項。DataTables 1.8 中的這個新功能放寬了 DataTables 對數據源的數據格式限制。在 DataTables 的先前版本中，預期伺服器端處理或 Ajax 來源的數據結構如下

[
    [ "row 1, cell 1", "row 1, cell 2", "row 1, cell 3" ],
    [ "row 2, cell 2", "row 2, cell 2", "row 2, cell 3" ]
]

這是一個數組的數組，表格中的每個單元格都有（完全）一個元素。任何偏離此結構或數組中的額外元素都會導致錯誤。雖然這對於許多表格來說已經足夠，並且伺服器端腳本足夠靈活，可以生成這種格式而無需進行重大修改，但它並不是特別靈活。

為了提高數據源的靈活性，您可能希望返回一個對象數組，如下所示

[
    { "cell1": "row 1, cell 1",
      "cell2": "row 1, cell 2",
      "cell3": "row 1, cell 3" 
    },
    { "cell1": "row 2, cell 1",
      "cell2": "row 2, cell 2",
      "cell3": "row 2, cell 3" 
    }
]

通過這種方式，您可以傳回不需要直接渲染表格的額外資訊。這對於根據表格中不可見的資訊來顯示和隱藏特定行的詳細資訊很有用。以前，這必須通過隱藏列中的資訊或通過額外的 Ajax 請求來完成。在 DataTables 1.8 中，通過使用 aoColumns 的 mData 初始化選項引入了從物件讀取資訊的能力。

為了使用上面範例中顯示的對象數組，使用 mData 選項，可以這樣初始化 DataTables

$('#example').dataTable( {
    "aoColumns": [
        { "mData": "cell1" },
        { "mData": "cell2" },
        { "mData": "cell3" }
    ]
} );

在此程式碼中，我使用 aoColumns 為表格中的每一列（在本例中為三列）建立初始化規範 - 這只是告訴 DataTables 如何處理每一列，使用這些值代替預設值。然後將 mData 設定為每個目標列要從每行的對象中獲取的屬性名稱。請注意，這使得來源對象中欄位資料的順序完全無關緊要！

預設行為

預設情況下，mData 是一個整數值，從值的數組索引讀取為列索引（即，如果是第二列，則數組索引 1 是數據源）。這複製了 DataTables 先前版本的行為以及它們處理數據的方式。因此，這個新功能是完全向後兼容的。如果需要，您可以將 mData 設定為整數，如果它給您數組，這對於重新排序原始來源的數據很有用。或者，如上面的範例所示，您可以將 mData 設定為字串，在這種情況下，DataTables 將從來源對象讀取該屬性。

深層數據屬性讀取

新的 mData 提供了比單純從扁平物件讀取資訊更大的靈活性。使用標準的 Javascript 點號物件表示法，您可以讀取深度嵌套的屬性和數組。例如，您可能有一個如下所示的數據源

[
    { "server": "Orion",
      "location": "London",
      "details": [
            "GMT",
            "10.0.0.1"
        ]
    },
    { "server": "Saturn",
      "location": "New York",
      "details": [
            "EST",
            "10.0.1.1"
        ]
    }
]

在這種情況下，有一個嵌套的數組，其中第一個元素是伺服器詳細資訊所在的時區，第二個元素是伺服器的 IP 位址。為了在一個四列的 DataTable 中顯示此資訊，您可以使用以下 DataTables 初始化

$('#example').dataTable( {
    "aoColumns": [
        { "mData": "server" },
        { "mData": "location" },
        { "mData": "details.0" },
        { "mData": "details.1" }
    ]
} );

在這種情況下，您可以看到第三列是指 details 數組的第一個元素（即，在 Javascript 中，您會寫 row['details'][0]）。數據可以嵌套的深度沒有限制（雖然顯然嵌套越深，所需的處理越多 - DataTables 對於少於三層嵌套進行了優化，以確保它們盡可能快）。

使用 DataTables 擴展的數據源選項

預設行為

深層數據屬性讀取

更多範例和討論

DataTables