DataTables 入門

更新：DataTables 手冊現在有一個安裝章節，詳細說明如何快速輕鬆地開始使用 DataTables。這篇部落格文章是在 DataTables 1.10 版本發布之前撰寫的，因此在某些方面已過時，但仍保留供歷史參考。

DataTables 是一個功能強大的 Javascript 函式庫，用於為 HTML 表格新增互動功能，雖然簡單性是整個專案的核心設計原則，但入門可能會讓人感到有些卻步。在這篇文章中，我將介紹您開始使用 DataTables 所需了解的基本概念，您會發現，在很短的時間內，您就能夠建立根據您的特定需求調整的進階表格控制項。

相依性

DataTables 只有一個相依性（它為了正常運作所依賴的其他軟體） - jQuery。 作為一個 jQuery 外掛程式，DataTables 利用了 jQuery 提供的許多出色功能，並連結到 jQuery 外掛程式系統，就像所有其他 jQuery 外掛程式一樣運作。jQuery 1.3 或更新版本適用於 DataTables，但通常您會想要使用最新版本（撰寫本文時為 1.6.2）。DataTables 包含其運作所需的一切。

HTML 需求

DataTables 在您的 HTML 中只需要一個

，該表格格式良好（即有效的 HTML），包含標頭（由 HTML 標籤定義）和主體（標籤）。一個典型的表格可能如下所示

<table id="table_id">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

如果您使用伺服器端程式（例如 PHP 腳本、Ruby 腳本、C# 程式或任何其他程式）產生 HTML 文件，則它們只需要像這樣輸出您的表格即可。這與您一般 HTML 表格的內容完全相同，儘管有時您可能需要新增

和標籤，因為這些並非總是使用（它們讓 DataTables 知道哪些應該用於欄標題和點擊排序控制項）。

包含 Javascript 和 CSS

當您想要使用 DataTables 時，第一件事是從 DataTables 下載頁面下載最新版本。解壓縮下載的檔案並將其上傳到您的網路伺服器。

若要在您的頁面上使用 DataTables，您必須先在您的網頁中包含該函式庫；這可以使用