tablesoterをRailsで使う方法 + FilterとSort機能の使い方

jueryプラグインのtablesorterをRailsで使う方法です。

tablesorterはtableをsortしたりfilteringするjQueryプラグインです。

ソースコード

まずはじめに、tablesorterには本家とforkして他の人が開発しているPageの二つのドキュメントがあります
本家：
http://tablesorter.com/docs/

Fork：
https://mottie.github.io/tablesorter/docs/

今回はForkの方を利用する方法を記載します。

ライブラリのダウンロード

app/assets/javascriptsディレクトリに

• jquery(jquery-2.1.1.min.js)
• jquery.tablesorter.combined.js(v2.23.2)

をダウンロードして配置します
https://mottie.github.io/tablesorter/docs/#Download

tablesorterの処理を記述

tableの作成

まずは普通にhtmlでtableを作成します。

<table class="tablesorter" border="1">
  <thead>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
    </tr>
  </thead>
  <tbody class="table-contents">
    <tr>
      <td>1</td>
      <td>3</td>
      <td>2</td>
    </tr>
    <tr>
      <td>foo</td>
      <td>baz</td>
      <td>bar</td>
    </tr>
  </tbody>
</table>

• class属性にtablesorterを指定します

この時点ではこんな感じのtableです。

jsの設定(tablesorter_test.js)

$('table.tablesorter').tablesorter({ 
});

• 名前はなんでもいいです

application.jsの編集

app/assets/javascripts/application.jsに以下を記述します

//= require jquery-2.1.1.min
//= require jquery.tablesorter.combined.js
//= require tablesorter_test.js

• 順番は逆にしないようにしましょう
• javascriptsディレクトリ以下全てを読み込む設定にしている場合はそのままでOKです

これだけで一番単純なsort機能は利用できるようになりました

• 各項目でsortすることが出来ます

TableSorterの他の機能の利用

まずデフォルトのTableがこのような状態です

デフォルトでsortさせる

上のままではPage読み込み時にはsortは行われていません。
これを最初から特定のcolumnでsortしておくことが可能です。

sortList: [[${何列目でsortするか}, ${昇順(0)か降順(1)か}]]

• 一番左の列を0とします

例1

$('table.tablesorter').tablesorter({
    sortList: [[0,0]],
});

• column1(0)で昇順(0)でsortされています

例2

$('table.tablesorter').tablesorter({
    sortList: [[2,1]],
});

• column3(2)で降順(1)でsortされています

Filter機能

上でjquery.tablesorter.combined.jsを使用している場合は、defaultでfilter機能も利用できます

widgets: ["filter"]

• widgetsとしてfilterウィジェットを利用すると宣言します。

例1

$('table.tablesorter').tablesorter({
    widgets: ["filter"],
})

• ちょっとずれていますが、filterボックスが各columnに表示され、入力された値でfilteringされうようになりました

filter機能を限定することも可能です

widgets: ["filter"],
headers: {${何個目の列か}: { filter: false }},

• widgetsとしてfilterウィジェットを利用すると宣言します。

例2

$('table.tablesorter').tablesorter({
    widgets: ["filter"],
    headers: {0: { filter: false }, 2: { filter: false }},
});

column1(0)とcolumn3(2)のfilter機能は廃止(false)されています

リセットボタン

filterに入力した値をリセットするボタンも簡単に作れます

まずはボタンを作ります

<button class="reset-filter-button">Reset Filter</button>

このボタンにリセット機能をセットします

widgetOptions : {
    filter_reset : 'button.reset-filter-button',
}

例1

$('table.tablesorter').tablesorter({
    widgets: ["filter"],
    widgetOptions : {
        filter_reset : 'button.reset-filter-button',
    }
});

これで入力値をリセットすることができます。

↓