TECH MEMO

rails に jquery tablesorter を実装してみた。

views のコンテンツが増える度にソート機能の実装をするのが面倒だったので jquery でやってみた。

tablesorter を download する。
tablesorter.zip

展開すると中身が以下のようになっている。

ls tablesorter/
addons
build
build.xml
changelog
docs
jquery-latest.js
jquery.metadata.js
jquery.tablesorter.js
jquery.tablesorter.min.js
tests
themes

本家のドキュメントをみる限り jquery.tablesorter.js, jquery-latest.js があれば動くように見える。
rails の public/javascripts/ 配下に設置する。

cp tablesorter/jquery-latest.js ~/rails/demo/public/javascripts/
cp tablesorter/jquery.tablesorter.js ~/rails/demo/public/javascripts/

自作のテーブル用の function として mytable.js を以下の様に作成して、
public/javascripts/ に設置する。"mytable" と table の id が結びつくことを頭に入れておく。

$(function() {
  $("#mytable").tablesorter({
    sortList: [[0,0]],
    widgets: ["zebra"],
    headers: { 0: { sorter:"digit"}}
  });
});

見栄えの為の css を public/stylesheets 配下に設置する。(必須ではない)

cp -r tablesorter/themes ~/rails/demo/public/stylesheets/tablesorter

top ページの head のタグ内に js と css を実装する。

<%= stylesheet_link_tag 'tablesorter/blue/style.css' %>
<%= javascript_include_tag("jquery-latest.js") %>
<%= javascript_include_tag("jquery.tablesorter.js") %>
<%= javascript_include_tag("mytable.js") %>

table 側には、table id="xxxx" , thead, tbody を使って実装する。

<h1>Listing customers</h1>

<table id="mytable" border="0" cellpadding="0" cellspacing="1">
<thead>
  <tr>
    <th>Customer</th>
    <th>Customer name</th>
  </tr>
</thead>
<tbody>
<% @customers.each do |customer| %>
  <tr>
    <td><%=h customer.customer_id %></td>
    <td><%=h customer.customer_name %></td>
    <td><%= link_to 'Show', customer %></td>
    <td><%= link_to 'Edit', edit_customer_path(customer) %></td>
    <td><%= link_to 'Destroy', customer, :method => :delete %></td>
  </tr>
<% end %>
</tbody>
</table>

<br />

<%= link_to 'New customer', new_customer_path %>

【Railsの最新記事】

投稿者：tech｜15:52｜Rails