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，才能將元素完全按照我們想要的 DataTable 佈局。為此，我們新增以下 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！
請享用！如果想要新增任何內容或有任何問題，論壇中有一個關於這篇文章的討論串。