DataTables
高级交互
为你的表格提供了支持。
编辑器
全面的编辑
用于 DataTables 的库。
手册
下载
≡ 显示站点导航
2011 年 5 月 10 日星期二

用 DataTables 创建美观且实用的表格

更新 - 2012 年 2 月 13 日：本文更新为 DataTables 1.9，该版本使用 A 标记来代替 SPAN 来进行分页控制。

DataTables 默认启用了大量功能（如在 零配置示例 中所见），但 DataTables 包随附的示例样式表故意比较基础，有时你会希望表格的外观和风格比默认样式允许的要更贴合。

幸运的是，对 DataTables 表格进行样式设置实际上是一个相对简单的过程，我将展示如何构建样式，以便你的表格看起来像本文中下面所示的那样。在这篇文章中，我只会使用非常基本的 DataTables 初始化，并且只专注于漂亮的 CSS 样式！我将针对 Inayaili de Leon 在这个示例中的出色作品进行扩展，最终我们会得到一个看起来像这样的表格

表

首先 - 我们需要一个表格来展示。你一定会希望对自己的表格进行样式设置，但在本示例中，我将使用苏格兰政府关于 学生人数 的一些统计数据。也许这不是最有启发性的信息，但这是一个可以在网站上呈现的统计表格的完美示例。基本未设置样式且未编写脚本的表格看起来像这样

<table id="example" border="0" cellpadding="0" cellspacing="0" class="pretty">
    <thead>
        <tr>
            <th rowspan="2">Local authority</th>
            <th colspan="7">Scottish domiciled students in HE</th>
        </tr>
        <tr>
            <th>2005-06</th>
            <th>2006-07</th>
            <th>2007-08</th>
            <th>2008-09</th>
            <th>2009-10</th>
            <th>% change<br>over last year</th>
            <th>% change<br>since 2005-06</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>212.920</td>
            <td>214.860</td>
            <td>206.390</td>
            <td>207.535</td>
            <td>213.210</td>
            <td>2.7</td>
            <td>0.1</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Aberdeen City</th>
            <td>9.750</td>
            <td>9.850</td>
            <td>9.945</td>
            <td>9.945</td>
            <td>10.080</td>
            <td>1.4</td>
            <td>3.4</td>
        </tr>
        ...
    </tbody>
</table>

请注意，由于表正文行中的 TH 元素，本示例使用了 DataTables 1.8，其中在正文中使用 TH 元素的能力是一项新功能。我们要处理的完整基本页面 在此处提供。

样式和脚本基础

为了保持我们的理智并提供表格样式的通用基线，我将包括 YUI 3 重置样式表。此样式表基本上会从查看器 Web 浏览器中剥离内置的默认样式，以在所有浏览器中进行样式设置的共同起点。这对于表格尤其有用，因为浏览器通常为各种元素设置不同的默认样式。此重置样式表使用以下 HTML 包含

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

我还向我的页面添加了一些基本样式，以便为我们提供一些可供使用的框架（字体大小、内容宽度等）。

接下来，我们包括并执行 JavaScript，以便使用 DataTables 增强表格。这是通过包括 jQuery 和 DataTables，然后初始化 DataTables 来完成的。在这个特定示例中，我选择通过指定 sPaginationType 参数来使用内置的“full_numbers”分页样式。这就是我们设置表格所需的所有 JavaScript。

<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "sPaginationType": "full_numbers"
        } );
    } );
</script>

DataTables 框架

现在，我们实际上可以开始设置表格及其组件的样式。这里首先要关注的是 DataTables 添加的各种表格控件的位置。这些是控制和显示有关表格信息的元素

  • 表格长度控件 - DIV 类“dataTables_length”
  • 筛选输入 - DIV 类“dataTables_filter”
  • 信息输出 - DIV 类“dataTables_info”
  • 分页控件 - DIV 类“dataTables_paginate”

DOM 中这些元素的顺序由 sDom 参数控制，该参数会直接影响你为元素设置样式的方式。在此例中，我们使用 sDom 的默认设置，因此此顺序与上述列表相同，表插入在过滤和信息元素之间。为了定位各个控件元素，我们可以使用 CSS 让它们浮动到相应位置。请注意，我还添加了突出显示的颜色，以便于查看每个元素的位置。此外，我还为各个元素添加了一点填充，以便它们在视觉上与表很好地配合。

div.dataTables_length {
    float: left;
    background-color: red;
}

div.dataTables_filter {
    float: right;
    background-color: green;
}

div.dataTables_info {
    float: left;
    background-color: blue;
}

div.dataTables_paginate {
    float: right;
    background-color: yellow;
}

div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate,
div.dataTables_info {
    padding: 6px;
}

因为我们使用浮动元素，所以我们需要考虑清除它们。在此例中，表需要清除分页长度和过滤输入，而表后面的任何内容需要清除分页和信息元素。对于表，我们可以使用简单的 clear: both，而对于内容，我们可以使用 自清除技术。

table.pretty {
    clear: both;
}

/* Self clearing - */
div.dataTables_wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
html[xmlns] .dataTables_wrapper { display: block; }
* html .dataTables_wrapper { height: 1%; }

表格样式

接下来是对表本身添加样式，以便它开始看起来更美观。首先，我们要将表宽度设置为 DataTable 容器元素的 100%（因为按照默认设置，浏览器会将宽度压缩到所需的最小大小，如上例所示）。然后，我们要为表中的单元格添加一些填充和白色边框。请注意，YUI 重置样式表设置 table { border-collapse: collapse }，因此我们不用担心单元格边框大于 1px。

table.pretty {
    width: 100%;
    clear: both;
}

table.pretty td,
table.pretty th {
    padding: 5px;
    border: 1px solid #fff;
}

对于表头单元格，我们只需添加背景颜色并将文本对齐到单元格的中心。我们这样来做

/* Header cells */
table.pretty thead th {
    text-align: center;
    background: #66a9bd;
}

在表体中，我们混合使用 TH 和 TD 元素，以赋予表的标记语义含义。这对于可视化样式也很有用，允许 CSS 选择符根据我们的需要选择单元格。在此例中，用于给出行标题的 TH 元素和用于给出行内容的 TD 元素应具有背景颜色和不同的文本对齐方式。请注意，DataTable 还向表中的 TR 元素添加“奇数”和“偶数”类，以便于轻松地给表添加斑马条纹（在此例中，我们仅使用“奇数”类）。

/* Body cells */
table.pretty tbody th {
    text-align: left;
    background: #91c5d4;
}

table.pretty tbody td {
    text-align: center;
    background: #d5eaf0;
}

table.pretty tbody tr.odd td { 
    background: #bcd9e1;
}

页脚与表体一样，有混合的 TH 和 TD 元素，用来提供语义含义。与表中的其他单元格一样，我们添加了一种背景颜色——在本例中为绿色，以此强调此行很重要。

/* Footer cells */  
table.pretty tfoot th {
    background: #b0cc7f;
    text-align: left;
}

table.pretty tfoot td {
    background: #d7e1c5;
    text-align: center;
    font-weight: bold;
}

最后，我们添加一种背景颜色，用于 DataTable 放置在页面中、用来容纳表及其所有控件元素的 DIV 元素。这实际上给表提供了页眉和页脚

div.dataTables_wrapper {
    background-color: #719ba7;
}

排序和分页

我们快完成了——非常近了！只需考虑以下两点：DataTable 添加的表的排序和分页控件。对于排序，这是由 DataTable 已经应用于每列的 TH 元素的类通过可视化方式控制的。

  • th.sorting_asc - 按此列对表进行升序排序
  • th.sorting_desc - 按此列对表进行降序排序
  • th.sorting - 可以按此列对表进行排序

为了可视化显示这一点，我们可以使用背景图像来指示正在按某列排序或者可以通过单击该列对其进行排序。

table.pretty thead th.sorting_asc {
    background: #66A9BD url('images/sort_asc.png') no-repeat right center;
}

table.pretty thead th.sorting_desc {
    background: #66A9BD url('images/sort_desc.png') no-repeat right center;
}

table.pretty thead th.sorting {
    background: #66A9BD url('images/sort_both.png') no-repeat right center;
}

分页控件的样式稍微复杂一些，但主要还是要调整填充和颜色。DataTable 使用多个类来辅助调整样式

  • a.paginate_button - 用于分页控件（例如每个按钮）的元素所用的类
  • a.paginate_active - 用于显示我们当前在表中哪一页的元素的类（请注意，这将替换 paginate_button 类）。
  • a.paginate_button_disabled - 当单击元素时不会产生任何效果的元素添加的类（例如，当您已经在第一页上时，“第一页”）。

此处，我们运用 em display: inline-block/em 和添加样式，在将鼠标悬停在上面时使光标变成手形，使 em A/em 元素更像按钮。另请注意，编号按钮（em div.dataTables_paginate span>a/em）具有固定宽度，以提供一致的视图并为这些按钮提供目标。最后，请注意，信息元素（em div.dataTables_info/em）需要一点额外的顶部填充，以便将其与分页按钮正确对齐。

a.paginate_button,
a.paginate_active {
    display: inline-block;
    background-color: #608995;
    padding: 2px 6px;
    margin-left: 2px;
    cursor: pointer;
    *cursor: hand;
}

a.paginate_active {
    background-color: transparent;
    border: 1px solid black;
}

a.paginate_button_disabled {
    color: #3d6672;
}
.paging_full_numbers a:active {
    outline: none
}
.paging_full_numbers a:hover {
    text-decoration: none;
}

div.dataTables_paginate span>a {
    width: 15px;
    text-align: center;
}

div.dataTables_info {
    padding: 9px 6px 6px 6px;
}

结论

在本篇文章中，我们了解了如何通过使用 DataTables 和一些基本的 CSS，使表格更具吸引力、与众不同和实用性。通过此处所示的基本框架，可以轻松修改样式，使其与您的网站平滑集成。在论坛中展示一些您想出的样式！

我希望您喜欢此文章！对于 本文中的评论和讨论，论坛中有一个主题。

页面导航

DataTables

DataTables 由 SpryMedia Ltd 设计和创建。
© 2007-2024 MIT 许可。 隐私政策。 支持者。
SpryMedia Ltd 在苏格兰注册，公司编号 SC456502。