开始使用 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，你必须先将库包含在你的网页中；这使用 :

<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="/DataTables/media/js/jquery.dataTables.js"></script>

You might already have jQuery on your web-page, in which case just drop the first line from above and include DataTables only.

You will likely want to apply some styling to your table to make it look nice in your web-page! DataTables includes a default stylesheet which can be used to apply the default look and feel to the table. You'll almost certainly want to customise the styling to integrate it with the look and feel of your web-site once you've got DataTables running (there is a separate blog post about how you can style your table as you wish).

To include the default CSS for the table you need to add the class name of "display" to your table (this is done so it doesn't interfere with any other tables you might have on your page), which is done quite simply with your table HTML:

<table id="table_id" class="display">

Then to include the CSS also add the following to your HTML document's :

<style type="text/css" title="currentStyle">
    @import "/DataTables/media/css/demo_table.css";
</style>

Initialising DataTables

That's almost it! We've got the HTML table we want to enhance, and we've got all the software and styles we need. All we need to do now is to tell DataTables to actually work its magic on the table. This is done with a few lines of Javascript:

$(document).ready( function () {
    $('#table_id').dataTable();
} );

If you've used jQuery before, you will know that the first line is used to make sure that the HTML document it ready for Javascript to be run on it (i.e. it the page has been fully downloaded from the server). The second line uses a jQuery selector to get a reference to the table in the HTML and then run the DataTables function on it.

That's it! DataTables will adding sorting, filtering, paging and information to your table by default, providing the end user of your web-site with the ability to control the display of the table and find the information that they want from it as quickly as possible.

There is an example of this basic DataTables initialisation available for you to have a look at and explore. This example is also included in the DataTables download package.

DataTables options

Now that you've got DataTables running, you might want to customise some of the features that it provides, such as turning on scrolling, turning off paging or using something other than just HTML as the data source (an Ajax source for example). There are a huge range of options for DataTables which you can use to customise it exactly as you want. In this example, let's look at how to enable vertical-scrolling on the table, and disable paging.

Options are given to DataTables as Javascript object, with the options you want to specify written in. If you don't specify an option, then the default values will be used for each option (which is how DataTables automatically enables filtering, sorting etc).

In this particular case, we want to use the sScrollY and bPaginate options to enable scrolling and turn off paging (so that all records show in the table together - the scrolling will stop the table being too huge!).

The sScrollY parameter takes a CSS measurement value which will be used for the height of the viewport for the table (anything bigger than this will be in the scrolling), and bPaginate is a simple boolean to turn paging on (true - default) or off (false). This is done as follows:

$(document).ready( function () {
    $('#table_id').dataTable( {
    "sScrollY": "200px",
    "bPaginate": false
    } );
} );

Next steps

With the basics of how to get DataTables going under your belt, you might now want to explore some of the options that is can provide in order to enhance your tables even further. To explore the world of DataTables further your could:

• Explore all of the options that are available for DataTables
• Style your table to look perfectly integrated into your web-site
• Use an extra for DataTable (a plug-in) to add features such as fixed columns or CSV, PDF and clipboard exporting
• Investigate all of the DataTables demos to see just how capable DataTables is and what features you want to make use of
• Take part in the DataTables community. Ask questions, answer others and make suggestions for DataTables.

Enjoy using DataTables!