多个表格
通常，您可能希望用一个语句初始化多个表格。通过使用将选择多个表格的 jQuery 选择器，可以轻松地完成此操作。
这些表格独立于用户控件（即，一个表格上的用户控制分页不会影响其他表格），但它们确实共享给定的初始化参数（例如，如果您指定西班牙语语言文件，则所有表格将以西班牙语显示）。此外，API 可用于一起或独立操作两者。
下面的示例显示了通过使用 table.display 选择器（即，选择具有 table.display 类的所有元素，在该示例中比较合适，您可能希望使用不同的选择器）一行代码初始化的两个表格。
| 姓名 | 职位 | 办公室 | 年龄 | 薪水 |
|---|---|---|---|---|
| 老虎 尼克松 | 系统架构师 | 爱丁堡 | 61 | $320,800 |
| 塞德里克 凯利 | 高级 JavaScript 开发人员 | 爱丁堡 | 22 | $433,060 |
| 索尼娅 弗罗斯特 | 软件工程师 | 爱丁堡 | 23 | $103,600 |
| 昆恩 弗林 | 支持负责人 | 爱丁堡 | 22 | $342,000 |
| 戴 里奥斯 | 人员负责人 | 爱丁堡 | 35 | $217,500 |
| 加文 乔伊斯 | 开发者 | 爱丁堡 | 42 | $92,575 |
| 马特娜 麦克雷 | 售后支持 | 爱丁堡 | 46 | $324,050 |
| 詹妮弗 阿科斯塔 | 初级 JavaScript 开发人员 | 爱丁堡 | 43 | $75,650 |
| 沙德·德克尔 | 地区总监 | 爱丁堡 | 51 | $183,000 |
| 姓名 | 职位 | 办公室 | 年龄 | 薪水 |
| 姓名 | 职位 | 办公室 | 年龄 | 薪水 |
|---|---|---|---|---|
| 耶娜 盖恩斯 | 办公室经理 | 伦敦 | 30 | $90,560 |
| 海莉 肯尼迪 | 高级营销设计师 | 伦敦 | 43 | $313,500 |
| 塔季扬娜·菲茨帕特里克 | 地区总监 | 伦敦 | 19 | $385,750 |
| 迈克尔 席尔瓦 | 营销设计师 | 伦敦 | 66 | $198,500 |
| 布拉德利 格里尔 | 软件工程师 | 伦敦 | 41 | $132,000 |
| 安吉丽卡 拉莫斯 | 首席执行官 (CEO) | 伦敦 | 47 | $1,200,000 |
| 苏基·伯克斯 | 开发者 | 伦敦 | 53 | $114,500 |
| 普雷斯科特 巴特莱特 | 技术作者 | 伦敦 | 27 | $145,000 |
| 蒂莫西·穆尼 | 办公室经理 | 伦敦 | 37 | $136,200 |
| 布鲁诺 纳什 | 软件工程师 | 伦敦 | 38 | $163,500 |
| 赫敏 巴特勒 | 地区总监 | 伦敦 | 47 | $356,250 |
| 拉尔 格里尔 | 系统管理员 | 伦敦 | 21 | $103,500 |
| 姓名 | 职位 | 办公室 | 年龄 | 薪水 |
- JavaScript
- HTML
- CSS
- Ajax
- 服务器端脚本
- 评论
下面显示的 JavaScript 用于初始化本例中显示的表格
$('table.display').DataTable();
new DataTable('table.display');
除了上述代码外，还加载了以下 JavaScript 库文件以便在这段示例中使用
下面的 HTML 是原始 HTML 表格元素，在被 DataTables 增强之前
本示例使用了库文件（如下所示）中加载的内容以外的一些额外 CSS，以便正确显示表格。下面显示了使用的额外 CSS
div.dt-container { margin-bottom: 3em; }
已加载以下 CSS 库文件以便在示例中使用，为表格提供样式
此表格通过 Ajax 加载数据。所加载的最新数据如下所示。随着加载任何额外的数据，该数据会自动更新。
用于对此表格执行服务器端处理的脚本如下所示。请注意，这仅仅是一个示例脚本，使用了 PHP。服务器端处理脚本可以用任何语言编写，使用 DataTables 文档中描述的协议。