2011 年 8 月 27 日星期六
开始使用 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>
如果你使用服务器端程序生成 HTML 文档,例如 PHP 脚本、Ruby 脚本、C# 程序或其他任何东西——他们只需要按照这种方式输出你的表格即可。这正是普通 HTML 表格所需的内容,尽管有时你可能需要添加
和标签,因为它们并非总会被使用(它们使 DataTables 能够知道应将什么用于列标题和点击以进行排序的控件)。包括 Javascript 和 CSS
在使用 DataTables 时要做的第一件事是,从 DataTables 下载页面 下载最新版本。解压缩下载的文件,并将其上传到你的网络服务器。
要在你的页面中使用 DataTables,你必须先将库包含在你的网页中;这使用