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 中的表格類別名稱已變得更加一致。您可以為表格選擇想要的類別，但在我的示範中，我使用了
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
接下來是顯示網格：為了定義 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 檔案的 media/images 中找到）
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;" 視覺流程會更好。
我們完成了
盡情享用！