環(huán)境 ：
ruby 1.8.7 + Rails 2.1.0 + ubuntu 8.1.0

效果：
http://www.dzone.com/links/index.html
http://flexidev.co.za/projects/jqpageflow/
http://paperc.de/documents

像上面的三個網(wǎng)站 的分頁效果 就是 scrolling pagination , 或者 叫 pageless pagination , endless pagination 用這些作為關(guān)鍵字， 都會搜到很多的demo， 這里我介紹 一種 demo，開發(fā) 環(huán)境 是 rails ，of course , 你也可以在其他的平臺使用。。

最用 一直在用各種 分頁的效果，一般都是 ajax的， 例如前面 有介紹了 prototype pagenation like twitter more button, 還有 jquery ajax pagenation,這里又是 jquery scrolling pagination.....

Demo:

依賴庫:
will_paginate 插件
jquery.js
jquery.pageless.js

請到 下面的 那個 ref link 里下

Action:

 def show
    @client_info = ClientInfo.find(params[:id])
    @comments = @client_info.comments.paginate(:per_page => 5 , :page => params[:page])

    if request.xhr?
      sleep(2) # make request a little bit slower to see loader :-)
      render :partial => 'comment' , :collection => @comments #返回 數(shù)據(jù)的partial
    end
end

解釋 ： server 端

helper method :

  # scrolling paginate like greader
  def pageless(total_pages, url=nil)
    opts = {
      :totalPages => total_pages,
      :url        => url
      #:loaderMsg  => '加載中...'
    }
    javascript_tag("$('#ajaxcomments').pageless(#{opts.to_json});")
  end

解釋; 封裝了一個 pageless 方法，即實現(xiàn) scrolling load 的的方法

view: show.html.erb

..............
 <%= render :partial => 'wall' %>
.........................

解釋 ： 前端 view


partial : _wall.html.erb

  <div class="wall" id ="ajaxcomments">
    <%- unless @client_info.comments.empty? -%>
      <%= render :partial => 'comment', :collection => @comments %>
    <%- end -%>
    <%= will_paginate @comments  ,
      :class => 'pagination',
      :previous_label => '&laquo; Previous',
      :next_label     => 'Next &raquo;',
      :renderer => 'WillPaginate::LinkRenderer' %> <%#= pageless must use will_paginate default style %>
    <%= pageless(@comments.total_pages, client_info_path(@client_info))  %>
  </div>

解釋 ： 注意這里需要 定義 一個 id， 還有 就是 will_paginate 里的那些 參數(shù) 可以 不要 的，這里我加的，是因為 我的 enviroment.rb 中 加了 will_paginate 的 配置，如果 你沒有的話， 可以去掉的
partial : _comment.html.erb
..............
<%= display comment.body %>
.........................
解釋 ： 顯示的 內(nèi)容

ref :
http://github.com/jney/jquery.pageless/tree/master