Twitter Bootstrap
更新 2：Bootstrap 与 DataTables 的集成现在在手册的 样式部分 中正式化。
更新：已发布新的博文 ，以本文为基础，介绍如何集成 DataTables 和 Twitter Bootstrap 2.0。
Twitter Bootstrap 是一款 CSS 框架，能帮助您快速轻松地构建统一外观和风格的用户界面。好消息是，集成 Bootstrap 和 DataTables 实际上非常容易，完全有特色的 DataTables 会匹配网站其他部分相同的风格。在本文中，我将展示如何集成 Bootstrap 与 DataTables。
要完成集成，需要重点关注三个基本领域
- 布局
- 排序控件
- 分页
布局
正如您对于 CSS 库所期待的那样，Bootstrap 采用了明确的网格系统。我们希望使用此网格系统在表格上方排列标准的 DataTable，其中包含长度更改和过滤控件，并在表格下方排列表格信息和分页控件。为此，将使用 sDom DataTables 初始化参数让 DataTables 创建所需的标记。因此，我们从（查看正在运行的示例）开始
$(document).ready(function() {
$('#example').dataTable( {
"sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>"
} );
} );
这会创建基本网格，但还需要提供额外一点 CSS 以便确切按照 DataTables 所需的方式布置元素。为此，我们将添加以下 CSS，它会添加我们想要的定位信息，并覆盖一两个会中断表格视觉流程的 Bootstrap 样式（查看正在运行的示例）
div.dataTables_length label {
width: 460px;
float: left;
text-align: left;
}
div.dataTables_length select {
width: 75px;
}
div.dataTables_filter label {
float: right;
width: 460px;
}
div.dataTables_info {
padding-top: 8px;
}
div.dataTables_paginate {
float: right;
margin: 0;
}
table {
margin: 1em 0;
clear: both;
}
排序
完成了基本布局 - 到目前为止十分简单！接下来，我们希望添加一些视觉排序反馈。DataTables 和 Bootstrap 均使用类来指示当前正在用特定列进行排序，或可以对特定列进行排序。唯一不同的是，不出所料，它们开箱即用时不会使用相同的类。因此，我们需要做的是修改 DataTables 将应用于列标题的默认类。这可通过 $.fn.dataTableExt.oStdClasses 对象轻松实现，其中包含 DataTables 将使用的默认类。
修改类时，可以简单地通过我们确实希望用于 Bootstrap 的类“扩展”对象（查看正在运行的示例）
$.extend( $.fn.dataTableExt.oStdClasses, {
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header"
} );
分页
Bootstrap 已为 分页控件 准备了样式。但是，用于控件的标记与 DataTables 将插入文档中的默认标记略有不同。为此，我已创建了一个 分页插件 ，它会创建 Bootstrap 所需的标记。该插件是集成 Bootstrap 时最复杂的部分，我不会在本篇文章中探讨其内部运作原理（有关分页插件的 开发人员文档，如果您有任何有关其工作原理的问题，请到 论坛 提问），但会留到以后的帖子中讨论。
该插件提供此文件，您只需将它包括在您希望同时使用 DataTables 和 Bootstrap 的页面上即可。然后，只需使用 sPaginationType 初始化参数为表激活插件（查看正在运行此示例）
$(document).ready(function() {
$('#example').dataTable( {
"sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>"
"sPaginationType": "bootstrap"
} );
} );
结论
在我的下方显示的最终表格中，我已经包含一点自定义长度选项语言字符串以完成集成（使用 sLengthMenu 参数）。然后我们就可以得到与 Twitter Bootstrap 完全集成的 DataTable！
尽情享用！此处有一个论坛线程，用于对此篇文章进行评论和讨论，如果您希望添加任何内容或有任何问题。