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」要素のDataTable制御要素のグリッドレイアウトを定義するが、12に変更して

は例を見ることができますブートストラップのカラムを "span6"に変更するだけです。我々はまた、ブロック（テーブルのフィルタリング入力と長セレクタがそうであるように、フォーム要素がインラインではなく、表示されるようにするために、DataTableのラッパー要素の新しいクラスを設定する必要が

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

：だから、私たちのDataTableの初期化は次のようになります。これによってもたらさこれを行うために、我々は単にDataTableのために「sWrapper」classオプションを拡張： ブートストラップV2をソート

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

は、テーブルのライブラリとしてTableSorterのサポートを落としており、結果として仕分けのクラスが削除されましたこのように私たちは独自のソートスタイリングを定義する必要があります。

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; } 

アップTidyの が最後に1.4から私の統合CSSには2つの変更があります。我々は（画像は、メディア/画像内のDataTableの配布zipファイルで提供されてい）のDataTable自身のCSSファイルで行うようAME方法ファイルを使用してスタイルを完成させます。

dataTables_lengthクラスとdataTables_filterクラスから幅を削除します。 Bootstrapのアップデートは、これらがもう必要なくなったことを意味します。 私が以前に持っていたテーブルクラスは "margin：1em 0;"しかし、彼が変わっても、「margin-bottom：6px！important;」でビジュアルフローが改善されました。

チェック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。