Home –  未分類 – Twitter Bootstrapとwill paginate使うとしょんぼり

Twitter Bootstrapとwill paginate使うとしょんぼり

http://www.slideshare.net/rosylilly/twitter-bootstrap-intro

↑のスライドを見ました。
「プログラマーはダサい。今やこれは常識!!」・・・・はい、マジでそう思います。すくなくても私はダサい!!!

ということで今作っているプログラムに導入してみました。twitter-bootstrap-railsというのを使って割りとちょちょいのちょいで入れることが出来ました。。。がそこにwill paginateが邪魔をしてくれました。

そう、表示が崩れてしますのです。

幸いなことに既に同じ状況で困っている方もおり、まとめておられました。

とりあえず、こちらのページをご案内(´・ω:;.:…
http://d.hatena.ne.jp/CortYuming/20120131/p1

残念な事にうちの環境では微妙に上手く表示されません。そこで出力するタグを修正することにしました。先程のページの設定(特にCSS)は入れたあとで下記のようなクラスを作成します。

twitter bootstrapでは<ul><li>を使ってページ番号を表現するようですのでそのようにしていきます。

class BootstrapPaginationRenderer < WillPaginate::ActionView::LinkRenderer   private      def previous_or_next_page(page, text, classname)       link(text, page, :class => classname)
  end

  public
  # method as you see fit.
  def to_html
    html = pagination.map do |item|
      tag(:li,
        ((item.is_a?(Fixnum))?
          page_number(item) :
          send(item)))
    end.join(@options[:link_separator])

    html = tag(:ul, html)

    @options[:container] ? html_container(html) : html
  end

end

このクラスを作ったのちにwill paginateを使う部分では例えばこんな感じに作ったクラスを使用するようにします。

<%= will_paginate @results, :renderer => BootstrapPaginationRenderer %>

私の環境ではこれで問題なく表示されるようになりました。

コメントを残す