安装

DataTables 是一个强大的 Javascript 库，用于向 HTML 表格添加交互功能，并且虽然简洁性是整个项目的核心设计原则，但初学者可能会觉得它很吓人。然而，踏出第一步，让 DataTables 在您的网站上运行实际上非常简单，因为您只需在页面中包含两个其他文件即可

DataTables Javascript 文件
DataTables CSS 文件

还有其他文件可用，比如编辑器用于添加编辑功能，以及其他插件，可用于扩展 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 提供支持，后者在世界各地拥有边缘服务器，确保 DataTables 的 JavaScript 和 CSS 可由您访客的浏览器以最快的速度加载。

只需加入以下 HTML，即可在您的页面上加入 DataTables（记住还要包括 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 中注册。例如，要使用响应式

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

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

请注意，在 DataTables 1.13.4 中，您可以使用 import 语法在项目中加入 DataTables，该项目以与 ES 模块完全相同的方式向下编译至 CommonJS。在 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 初始化

如果您喜欢在不用 jQuery 提供的抽象的情况下编写 Javascript，您可以从（v1.11 版）开始使用

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

其中 `new DataTable()` 的参数为

DOMString 选择器或 HTML 元素，用于从 DOM 中挑选表格。
DataTables 选项对象。

而构造函数将返回一个 DataTables API 实例，允许对表格进行操作。

后续步骤

初步了解了如何使用 DataTables 之后，您可能现在希望探索其他一些选项，以进一步增强您的表格

自定义 DataTables 选项以满足您的需求。
使用 API以通过编程方式访问和控制表格。
设置表格的样式以与您网站的主题相匹配。
探索 DataTables 示例.
参与 DataTables 社区。提出问题、回答他人问题、提出建议，或只是打个招呼！