環(huán)境：ruby 1.8.7 + rails 2.1.0 + jquery + ubuntu 8.10

效果和xiaonei的  更多新鮮事  一樣：


前面有篇文章也介紹了一個(gè)像 twitter more 的方式分頁的方法，不過那個(gè)是用 protorype 做的。。那個(gè)做起來簡(jiǎn)單一點(diǎn)，因?yàn)閞ails給我們封裝了 insert_html 和 link_to_remote 等方法，這樣更加便捷，但是解決jquery 和 prototype的confilct是一件很讓人頭疼的事，索性今天又實(shí)現(xiàn)了一個(gè)基于 jquery 的方法,環(huán)境是在rails中，需要使用 will_paginate 插件：
Demo:

view:

<script>
(function($){
    var settings;

    $.bottomlessPagination = function(callerSettings) {
        settings = $.extend({
            ajaxLoaderPath:'/images/loading.gif',
            results:'.results', // results 返回結(jié)果外部的class
            objName:'',
            callback:null
        },callerSettings||{});
        settings.imgLoader = new Image();
        settings.imgLoader.src = settings.ajaxLoaderPath;
        settings.href = $(".current").next().attr("href"); //current 是 will_paginate 默認(rèn)的當(dāng)前頁 href 的名字

        if ($('div.pagination').size() > 0){ // pagination 是 will_paginate 默認(rèn)的 class
            $('div.pagination').wrap("<div class='pagination_links'></div>").hide();
            $('.pagination_links').append(
                "<div class='live_pagination'>" +
                "<a class='more_links' style='cursor:pointer;'> 查看 " + settings.objName + "...</a>" +
                "</div>"
                );
        }
   
        $(".more_links").click(function(){ 
            $(".live_pagination").hide();          
            if ($(".now_loading").size() == 0)              
                $(".more_links").after("<img class='now_loading' src='"+settings.imgLoader.src+"' />");          
            else
                $(".now_loading").show();           
            $.get(
                settings.href,'',function(data){
                    $(settings.results).addrows(data);
                    $(".now_loading").hide();
                    $(".live_pagination").show();
                }
                );
            return false;
        });

        $.fn.addrows = function(data) {
            //remove live pagination if there are no more results
            // alert(data.length);
            if (data.length === 1 ){
               // alert(data.length);
                $('.live_pagination').remove();
                $('.pagination_links').append(
                    "<div class='no_pagination'>" +
                    "沒有" + settings.objName +
                    "</div>"
                    );
                return false;
            }
            //change the href
            ind=settings.href.indexOf("page=");
            page=parseInt(settings.href.charAt(ind+5))+1;
            start=settings.href.slice(0,ind+5);
            stop=settings.href.slice(ind+6);
            settings.href=start.concat(page.toString()).concat(stop);

            //add results to the page
            $(settings.results).append(data);
            if (settings.callback) settings.callback();
        };
    };
})(jQuery);
</script>


          <div class="results">
            <%= render :partial => 'activity' , :collection => @all_feed  %>
          </div>
          <%= will_paginate @all_feed  ,
            :class => 'pagination',          
            :previous_label => '&laquo; Previous',
            :next_label     => 'Next &raquo;',
            :renderer => 'WillPaginate::LinkRenderer' %>
          <div>
<div class="now_loading" style="display:none;">
  <img src="/images/loading.gif"></img>
</div>
<script>
  $.bottomlessPagination({objName:'更多更新', callback:function(){
      //highlight current row
      //  $("div.results").effect("highlight", {}, 3000);
    }});
</script>



Action:
def index

    if request.xhr?    
        sleep(1) # make request a little bit slower to see loader :-)   
          render :partial => 'activity' , :collection => @all_feed
end


partial:_activity.html.erb
partial 里輸出數(shù)據(jù)即可


主要的注意點(diǎn)就是注意對(duì)應(yīng)class 不要寫錯(cuò)了，同樣，你也可以把class 換位id做，jquery取id就這樣： $("#ID")

上面js文件下載：
http://www.dbank.com/download.action?k=3094283bf64e445f9530ac0554ebc9ce

ref:
http://github.com/davidwparker/jquery-bottomless-pagination