環(huán)境: ruby 1.8.7 + rails 2.1.0 + > = jquery 1.3.2

效果預覽：


一般 我們 在rails 中 分頁 will_paginate 是必不可少的插件，但是 一般都是基于 prototype 的，例如 ajax 式的分頁， 通過 RemoteLinkRenderer改變 css 樣式等等，都是 基于prototype 的，但是 prototype 和 Jquery 在項目中 經常遇到conflict ，這個 很 讓人 頭疼，rails 封裝好的ajax方法，好多 都因為 jquery 不能用，jquery 那么 好 前端 用戶體驗，又因為 prototype 出現(xiàn) conflict ， 哎 為什么 相互殘殺 呢。。。。。

上面實現(xiàn)的核心思想 是 前端 通過 jquery的 異步調用數(shù)據， 后臺 rails 通過 respond_to fotmat.js 的方式 給予 返回數(shù)據。。。

Demo:

layout 中導入：
    <%= stylesheet_link_tag 'pagination' -%>
    <%= javascript_include_tag 'jquery' %>
pagination 是改變分頁的樣式


Action:

  def index
    @products = Product.paginate(:per_page => 10, :page => params[:page])
    respond_to do |format|
      format.html                        #default : index.html.erb
      format.js {:layout => false} # default : index.js.erb
    end
  end

View:

index.html.erb

<div id="product">
  <%= render :partial => 'products' %>
</div>

index.js.erb

$("#product").html("<%= escape_javascript(render :partial => "products") %>");

escape_javascript 是轉義的意思 和 <%=h %> 這里的 h 差不多

partial :
_products.html.erb

<script>

$(function() {
  $(".apple_pagination a").live("click", function() {
    $(".apple_pagination").html("Page is loading...");
    $.get(this.href, null, null, "script");
/* alert(this.href); */
    return false;
  });
});

</script>

<%= will_paginate @products , :class => 'apple_pagination' ,:previous_label => '<<上一頁', :next_label => '下一頁>>'   :renderer  => 'WillPaginate::LinkRenderer' %>

<% for product in @products  %>
  <div class="product">
    <h3>
      <%= link_to h(product.name), product %>
      <%= number_to_currency(product.price) %>
    </h3>
  </div>
<% end %>

上面的 $(".apple_pagination a")  即是 will_paginate 的 :class ，：renderer 使用的是will_paginate 的default 的，如果 enviroment.rb 中配置了will_paginate的樣式，這里不寫 :renderer 會出錯！，具體默認的參數(shù) 可以查看 will_paginate 下的 view_helpers.rb

全部 源碼 下載：
http://www.uushare.com/user/fl1429/file/1941241

配置方法：
1，進入工程， rake setup
2,ruby script/server
3,okay 成功 了。。。。

補充 ： 如果 一個 頁面 有兩處需要 分頁，那么 will_paginate 默認 情況下 是同時翻頁的。。那么 如何 避免呢。。只需要 給各自的 will_paginate 指定 不同的 class 即可  例如

will_paginate :

<%= will_paginate collection ,
  :class => "apple_paginate my_paginate",
  :previous_label => '<<上一頁',
  :next_label => '下一頁>>' ,
  :renderer  => 'WillPaginate::LinkRenderer'  %>

apple_paginate 是 分頁的真正的 css，my_paginate 是為了 區(qū)別 不同區(qū)的 分頁 而加的


jquery script :
  jQuery(function() {
    jQuery(".my_paginate a").live("click", function() { 
      jQuery(".my_paginate").html("正在加載...");
      jQuery.get(this.href, {flag : "my" }, null, 'script');
      return false;
    });
  });

注意 jquery get 方法的 四個參數(shù) 的 意義

ref:
http://railscasts.com/episodes/174-pagination-with-ajax
http://soylentfoo.jnewland.com/articles/2007/09/17/resource_this-dry-rails-resource-controllers
http://book.csdn.net/bookfiles/375/10037514155.shtml
http://stackoverflow.com/questions/1268383/format-js-with-rails