安裝

DataTables 是一個功能強大的 Javascript 函式庫，用於為 HTML 表格新增互動功能。雖然簡潔是整個專案的核心設計原則，但入門時可能會讓人感到有些不知所措。不過，開始使用並讓 DataTables 在您的網站上運作實際上非常簡單，您只需要在您的網頁中包含兩個額外的檔案即可

DataTables Javascript 檔案
DataTables CSS 檔案

還有其他可用的檔案，例如用於新增編輯功能的 Editor，以及用於擴充 DataTables 功能集的其他外掛程式，但基本上，您只需要包含這兩個檔案即可開始運作！

需求

在我們開始之前，我們需要考慮 DataTables 運作所需的需求。

相依性

DataTables 只有一個函式庫相依性（為了正常運作而依賴的其他軟體） - jQuery。身為 jQuery 外掛程式，DataTables 利用了 jQuery 提供的許多優異功能，並以與所有其他 jQuery 外掛程式相同的方式掛鉤到 jQuery 外掛程式系統。jQuery 1.7 或更新版本可與 DataTables 搭配使用，但通常您會希望使用最新版本。DataTables 包含其運作所需的一切。

HTML

為了讓 DataTables 能夠增強 HTML 表格，該表格必須是有效的、格式良好的 HTML，具有標頭 (thead) 和單一主體 (tbody)。也可以使用選用的頁尾 (tfoot)。

<table id="myTable" class="display">
    <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 表格的內容完全相同，雖然有時候您可能需要新增 thead 和 tbody 標籤，因為它們不一定會使用（它們讓 DataTables 知道哪些應該用於欄標頭和點擊排序控制）。

請注意，如果您使用 Ajax 來源資料，DataTables 實際上可以為您產生 thead 和 tbody，以及表格的所有列和儲存格，但目前我們將重點放在純 HTML 上。如需 DataTables 可以使用的不同資料來源的詳細資訊，請參閱本手冊的資料來源章節。

另請注意，雖然 DataTables 支援表格標頭和頁尾中的 colspan 和 rowspan，但表格的 tbody 中不支援這些，且不得存在。

安裝 Javascript / CSS

安裝 DataTables 的主要部分是在您的網頁中包含 DataTables 原始檔案。如本頁頂部所述，這僅僅需要包含 DataTables Javascript 和 CSS 檔案。

可以使用多種不同的方式安裝所需的檔案

使用 DataTables CDN
本機
使用套件管理器，例如 NPM 或 Bower。

CDN

CDN 是內容傳遞網路，它具有經過調整的邊緣伺服器，可以為網頁瀏覽器提供極低延遲的媒體檔案。當使用者從 CDN 接收檔案時，瀏覽器會快取該檔案以供重複使用。這表示使用相同 Javascript 函式庫的不同網站可以共享大幅效能提升，因為瀏覽器不需要從不同伺服器為每個網站下載相同檔案。

DataTables CDN 由 CloudFlare 提供支援，CloudFlare 在世界各地都有邊緣伺服器，確保訪客的瀏覽器可以盡快載入 DataTables 的 Javascript 和 CSS。

若要在您的網頁中包含 DataTables，只需包含下列 HTML（請記得同時包含jQuery）

<link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />
 
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>

本機安裝

如果您不想要使用 CDN，而是希望將檔案託管在您自己的伺服器上，或者您想要修改這些檔案，那麼開始使用 DataTables 同樣簡單。

只需使用下載產生器下載最新版本的 DataTables，選取您需要的任何額外軟體和樣式，然後下載自訂套件。然後解壓縮並上傳至您的網頁伺服器。接著，您的伺服器上會有一個名為 DataTables 的目錄。然後使用下列 HTML 在您的網頁中包含 DataTables

<link rel="stylesheet" href="/DataTables/datatables.css" />

<script src="/DataTables/datatables.js"></script>

Node.js / NPM

DataTables 及其擴充功能以 NPM 套件的形式提供。套件基本名稱為 datatables.net，擴充功能和樣式整合選項以個別套件的形式提供 - 請參閱NPM 安裝指南以取得可用套件的完整詳細資訊。

例如，以下內容可用於安裝 DataTables 及其預設樣式

npm install datatables.net-dt

ES 模組

載入 Javascript 的方式有很多種。Node.js 和伺服器端捆綁器中最常見的兩種方式是 ES 模組和 CommonJS。Javascript 世界正朝較新的 ES 模組語法發展，而 NPM DataTables 套件及其所有擴充功能都可以原生使用 ES 模組運作。

首先，依照上述指示安裝您需要的套件，然後匯入模組

import DataTable from 'datatables.net-dt';

let table = new DataTable('#myTable', {
    // config options...
});

若要安裝和使用擴充功能，您只需匯入它們，它們就會自動向 DataTables 註冊。例如，若要使用 Responsive

import DataTable from 'datatables.net-dt';
import 'datatables.net-responsive-dt';

let table = new DataTable('#myTable', {
    responsive: true
});

請注意，從 DataTables 1.13.4 開始，您可以使用 import 語法，以與 ES 模組完全相同的方式，在向下編譯為 CommonJS 的專案中包含 DataTables。這通常在 TypeScript 專案中發生。

CommonJS

CommonJS 是一種較舊的載入器類型，在 Node.js 世界中非常常見（雖然現在正逐漸被 ES 模組取代）。DataTables 套件全部可與 CommonJS 搭配使用 - 例如

var DataTable = require( 'datatables.net' );

let table = new DataTable('#myTable', {
    // config options...
});

擴充功能類似 - 請注意，您不需要將 require 的傳回值指派給變數。此功能會自動新增至 DataTables

var DataTable = require( 'datatables.net' );
require( 'datatables.net-responsive' );

let table = new DataTable('#myTable', {
    responsive: true
});

無視窗環境

如果您正在建置一個提供自己的 window 和 document 的應用程式（即不是網頁瀏覽器），則 CommonJS 傳回的函數簽名會稍微不同 - 套件會匯出一個可以使用兩個選用引數執行的工廠函數 - 要使用的 window 和 jQuery 物件

var $ = require( 'jquery' );
var DataTable = require( 'datatables.net' )(window, $);

let table = new DataTable('#myTable', {
    // config options...
});

Bower

DataTables、其擴充功能和樣式選項也以 Bower 套件的形式提供。套件名稱與 NPM 套件相同，其中 datatables.net 為基本名稱。若要透過 bower 安裝 DataTables 及其預設樣式，請使用

bower install --save datatables.net
bower install --save datatables.net-dt

初始化 DataTables

幾乎完成了！我們已取得想要增強的 HTML 表格，並且已取得我們需要的所有軟體和樣式。現在只需要告訴 DataTables 實際對表格施展其魔法即可。這可以使用幾行 Javascript 完成

$(document).ready( function () {
    $('#myTable').DataTable();
} );

如果您之前使用過 jQuery，您會認得此腳本的形式：我們會等待文件完全準備就緒，然後選取我們想要的表格，並在其上執行 DataTables 函數。

就是這樣！DataTables 預設會為您的表格新增排序、搜尋、分頁和資訊，讓您的終端使用者能夠盡快找到他們想要的資訊。

如果您想要自訂您的 DataTable，可以在傳遞給 DataTable() 函數的物件中指定組態參數來完成。如需如何使用這些組態參數的資訊，請參閱選項手冊頁面。

非 jQuery 初始化

如果您偏好編寫 Javascript 而不使用 jQuery 提供的抽象化，您可以使用 (自 v1.11 起)

let table = new DataTable('#myTable', {
    // options
});

其中 new DataTable() 的參數為

一個 DOMString 選取器或 HTML 元素，以從 DOM 中選取表格。
一個 DataTables 選項的物件。

而且，建構函式將傳回一個DataTables API 執行個體，允許操作表格。

後續步驟

在您掌握如何開始使用 DataTables 的基本知識後，您現在可能想要探索其他一些選項來進一步增強您的表格

自訂 DataTables 選項以符合您的需求。
使用 API 以程式設計方式存取和控制表格。
設定表格樣式以符合您網站的主題。
探索 DataTables 範例.
參與 DataTables 社群。提出問題、回答他人、提出建議，或只是打聲「嗨」！