如何讓表格能夠使用Twitter Bootstrap進行排序？

Question

我想知道如何讓我的桌子能夠使用Twitter Bootstrap進行排序？有什麼要考慮的事情？

Answer 1

您需要使用jQuery和dataTable.js。

讓我們看看一個例子：

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example"> 

顯示網格：定義用於數據表的控制元件的網格佈局，先前我們已經使用的「span8」元素來表示半值寬度的元件，但與變化至12 Bootstrap中的列只需要更改爲使用「span6」。因此，我們的數據表初始化的樣子：

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

我們還需要設置在數據表包裝元素一個新的類，以使窗體元素出現的內聯，而不是作爲一個塊（表過濾輸入和長度選擇是通過這種影響要做到這一點，我們只是延長「sWrapper」類選項的數據表：

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

排序 引導V2已降至支持的tablesorter作爲表庫，結果排序類已被刪除因此我們需要定義我們自己的排序樣式，我們可以完全按照這個樣式進行排序AME的方式，因爲我們做的DataTable自己的CSS文件（影像是在介質中的數據表分配一個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;」但隨着他變化，視覺流動現在更好，「邊緣底部：6px！重要」;

檢查this參考

Answer 2

有一個library提供與自舉表排序的能力。

這是關於如何使用它的quick demonstration。

HTML：

<table class="table table-bordered table-striped sortable"> 
    <thead> 
     <tr> 
     <th data-defaultsign="month" data-sortcolumn="1" data-sortkey="1-1"> 
     Date 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td data-dateformat="D-M-YYYY">16.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.7.2002</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">4.4.2004</td> 
    </tr> 
    <tr> 
     <td data-dateformat="D-M-YYYY">6.6.2012</td> 
    </tr> 
    </tbody> 
</table> 

JS：

(function() { 
    var $table = $('table'); 
    $table.on('sorted', function() { 
     console.log("Table was sorted."); 
    }); 
}()); 

HTH。