twitter bootstrap table sort機能

2013年9月11日更新 view: 55 view
photoBy: http://otndnld.oracle.co.jp/document/products/owl…
スポンサードリンク

sort機能を bootstrap で使ってみる

datatablesを使う

http://datatables.net/release-datatables/examples/basic_init/zero_config.html
にあるものを使ってbootstrapに組み込んでみよう。

まずはダウンロード

http://datatables.net/download/

よりダウンロードできます。

twitterbootstrap に組み込む

まずは以下のファイルを揃える

  • /media/css/demo_table.css を datatable.css として保存
  • /media/js/jquery.dataTables.min.js
  • /media/images/ を画像フォルダへ突っ込み、 上記datatable.css の画像パスを変更

htmlへ読み込み

<link href="/app/webroot/css/datatable.css" rel="stylesheet">
<script src="/app/webroot/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" charset="utf-8">
    
    $(function() {
        $('.datatable').dataTable({
        
        
        "oLanguage": {
            "oPaginate": {
                
                "sNext": "次へ",
                "sPrevious": "前へ",
                
            },
            "sInfo": "表示 _START_ to _END_ of _TOTAL_ 件",
            "sSearch": "検索",
            "sInfoEmpty": "情報がないよ",
            "sInfoFiltered": "(フィルター from _MAX_ total entries)",
            "sLengthMenu": "表示 _MENU_ 件",
            "sZeroRecords": "見つかりません"
        }
    
    
        
        });
    });
    
    
</script>


<style type="text/css">

</style>


<table class="datatable table table-bordered table-striped" width="100%">
    <thead>
        <tr>
            <th style="width:120px;">投稿日</th>
            <th>広告名</th>
            
            <th>クチコミ内容</th>
            <th style="width:80px;">チェック</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2013年09月11日</td>
            <td>化粧品ブログに被リンクつきでクチコミして下さい。</td>
        
            <td>http://www.yahoo.co.jp にハゲと言うことでクチコミしました。なんか良い事無いかなと思う日々でごじあます。</td>
            
            <td>3</td>
        </tr>
        <tr>
            <td>2013年09月11日</td>
            <td>化粧品ブログに被リンクつきでクチコミして下さい。</td>

            <td>http://www.yahoo.co.jp にハゲと言うことでクチコミしました。なんか良い事無いかなと思う日々でごじあます。</td>
            
            <td>2</td>
        </tr>
        <tr>
            <td>2013年09月09日</td>
            <td>化粧品ブログに被リンクつきでクチコミして下さい。</td>
            
            <td>http://www.yahoo.co.jp にハゲと言うことでクチコミしました。なんか良い事無いかなと思う日々でごじあます。</td>
            
            <td>1</td>
        </tr>
        <tr>
            <td>2013年09月11日</td>
            <td>化粧品ブログに被リンクつきでクチコミして下さい。</td>
            
            <td>http://www.yahoo.co.jp にハゲと言うことでクチコミしました。なんか良い事無いかなと思う日々でごじあます。</td>
            <td>3</td>
        </tr>
        
    </tbody>
    <tfoot>
        <tr>
            <th>投稿日</th>
            <th>広告名</th>
            
            <th>クチコミ内容</th>
            <th>チェック</th>
        </tr>
    </tfoot>
</table>

これで日本語化されて、テーブルソート機能が有効になります。

ソート初期値

$(function() {
        $('.datatable').dataTable({
        
        "aaSorting": [[ 0, "desc" ]],
        
        "oLanguage": {
            "oPaginate": {
                
                "sNext": "次へ",
                "sPrevious": "前へ",
                
            },
            "sInfo": "表示 _START_ to _END_ of _TOTAL_ 件",
            "sSearch": "検索",
            "sInfoEmpty": "情報がないよ",
            "sInfoFiltered": "(フィルター from _MAX_ total entries)",
            "sLengthMenu": "表示 _MENU_ 件",
            "sZeroRecords": "見つかりません"
        }
    
    
        
        });
    });

aaSorting の 数字を変えることで ソートされる 列が変わります。

表示件数を変更

"aLengthMenu": [[100,200, 500, -1], [100,200,500, "全て"]],

上記オプションを指定でOK

最初の表示数を指定

"iDisplayLength": 100,
スポンサードリンク

関連記事

関連カテゴリ