2012 年 2 月 1 日星期三

Twitter Bootstrap 2

更新：DataTables 中 Bootstrap 集成现已在手册的样式小节中形式化。

Twitter Bootstrap 人员刚刚发布其 UI 框架的 v2 版本，包含了 v1 系列的许多改进。但是，与重大升级一致，也有一些 API 变化。因此，此帖将针对我的 Bootstrap 1.4 原始文章进行更新，展示如何将 DataTables 与 Bootstrap 2 结合使用。

Bootstrap 2 中影响 DataTables 集成的变更包括：

表格类别的名称更改
网格已从 16 列更改为 12 列
表分类别已移除
表单元素的布局略有不同
对表 CSS 的微小更改

分页样式在 Bootstrap 2 中几乎保持不变，因此我们无须对我的原始文章中的内容进行任何修改。

布局

这是一个非常简单的变化。Bootstrap 2 中的表格类名变得更加一致。您可以选择表格所需的类别，但我在演示中使用了

&lt;table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"&gt;

接下来是显示网格：为了定义 DataTables 控制元素的网格布局，之前我们使用了 “span8” 元素表示半宽元素，但随着 Bootstrap 中将列更改为 12 列，我们只需更改为使用 “span6” 即可。因此，我们的 DataTables 初始化看起来像

$(document).ready(function() {
    $('#example').dataTable( {
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
    } );
} );

我们还需要在 DataTables 封装元素上设置一个新类别，才能让表单元素呈内联显示，而不是块状显示（表格筛选输入和长度选择器会受到影响。为此，我们只需扩展 DataTable 的 “sWrapper” 类别选项

$.extend( $.fn.dataTableExt.oStdClasses, {
    "sWrapper": "dataTables_wrapper form-inline"
} );

分类

Bootstrap v2 已放弃了对 TableSorter 作为表格库的支持，因此已移除分类类别。因此，我们需要定义我们自己的分类样式，与我们在 DataTables 自有 CSS 文件中的操作方式完全相同（图像可在 DataTables 发放的 zip 文件中的媒体/图像中找到）

table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
}

table.table thead .sorting { background: url('images/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('images/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('images/sort_desc.png') no-repeat center right; }

table.table thead .sorting_asc_disabled { background: url('images/sort_asc_disabled.png') no-repeat center right; }
table.table thead .sorting_desc_disabled { background: url('images/sort_desc_disabled.png') no-repeat center right; }

整理

最后，需要针对我的 1.4 文件进行两次集成 CSS 修改，才能完成样式设置

从 dataTables_length 和 dataTables_filter 类别中移除宽度。Bootstrap 中的更新意味着不再需要这些内容。
我之前的表格类别具有 “margin: 1em 0;” 但随着更改，现在 “margin-bottom: 6px !important;” 的视觉流程效果更佳

大功告成

尽情享受！