2011年8月26日金曜日

rails ページネート kaminariを試してみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
もうひとつの人気のあるページネートのgem kaminariを試してみた

参考
http://ja.asciicasts.com/episodes/254-pagination-with-kaminari
https://github.com/amatsuda/kaminari
https://github.com/amatsuda/kaminari/wiki/Kaminari-recipes
テーマ
https://github.com/amatsuda/kaminari_themes


準備
テスト用データ
rails g scaffold article title:string

rake db:migrate
ページネート確認の為適当にデータを入れておく

ここから kaminari
・gemfileに記述 インストール
gem "kaminari"

bundle install

・コントローラのindexを修正
  def index
    @articles = Article.order("title").page(params[:page]).per(1)

順番をtitle、1ページあたり1つのデータを表示

・ビューのindexにページネート表示部分を追加
<%= paginate @articles %>

/articlesから確認。問題なさそう












デフォルトではwill_pagenateより見た目はいい感じですね。first、lastのリンクもついてる

will_pagenateのinnder、outerwindowも同じように設定できる感じ
<%= paginate @users, :window => 2 :outer_window => 3 %>

カスタマイズするようのビューをジェネレータで作れるみたいなのでやってみる
rails g kaminari:views default
create  app/views/kaminari/_first_page.html.erb
create  app/views/kaminari/_gap.html.erb
create  app/views/kaminari/_last_page.html.erb
create  app/views/kaminari/_next_page.html.erb
create  app/views/kaminari/_page.html.erb
create  app/views/kaminari/_paginator.html.erb
create  app/views/kaminari/_prev_page.html.erb

たくさんページが作られる。これを自分なりに変更できるっていうことかな。
見た目はデフォルトなのでかわらない。

以下のコマンドで用意されているThemeをみることができる
rails g kaminari:views
他にgoogle githubの2つがあるようだ

早速着せ替えをしてみる。
rails g kaminari:views google

ビューのページネートのinner,outerの設定を修正
<%= paginate @articles,:window => 10, :outer_window => -1 %>

変更後を確認してみる







グーグルほぼまんまなんだが使って大丈夫なんだろうか・・・

次にgithubのthemeを使ってみる
rails g kaminari:views github

ビューのページネート部分を以下に修正
<%= paginate @articles %>

変更後を確認。















シンプルなOlderとNewerとシンプルなフォーム

themeを選んで設定できるのはいいですね。今後使えるテーマも増えていくのかな

最後にAjaxの設定も簡単みたいなので試してみる。
(rails g kaminari:views defaultでデフォルトに戻しておく)

・ビューのページネート部分を以下のように設定
<%= paginate @articles, :remote => true %>

・_articlelist.htmlを作成し、indexのテーブル部分を切り取って、貼り付け。
pagenate部分も入れておく、そしてdivでラップした

<div id="articlelist">
  <table>
    <tr>
      <th>Title</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>

    <% @articles.each do |article| %>
      <tr>
        <td><%= article.title %></td>
        <td><%= link_to 'Show', article %></td>
        <td><%= link_to 'Edit', edit_article_path(article) %></td>
        <td><%= link_to 'Destroy', article, :confirm => 'Are you sure?', :method => :delete %></td>
      </tr>
    <% end %>
  </table>

  <%= paginate @articles,:remote => true %>

</div>

表示は部分テンプレートで呼び出す
<%= render 'articlelist' %>

・コントローラーのindexのresponse部分にformat.jsを追加
    respond_to do |format|
      format.js if request.xhr?

・ビューのarticlesにindex.js.erbを作成してテンプレートを置き換えさせる
$("articlelist").update ("<%= escape_javascript(render :partial => 'articlelist' ) %>");
(この書き方はあまりよくないのかもしれない。ajax勉強しないとなあ)

で完成。indexページからページネート部分をクリックしてみるとちゃんとajaxでコードが書き換えられてる。

とりあえずここまで。ページネートの見た目をカスタマイズしやすいのとremoteの設定もしやすいのがいいですね。テーマまの着せ替えも簡単。でももうちょっとバリエーションがほしいかな。そこは自分でカスタマイズして対応か

0 件のコメント:

コメントを投稿