简体   繁体   English

jquery 带有 will_paginate 的 rails 3 中的无尽页面

[英]jquery endless page in rails 3 with will_paginate

Does any one know how i can go about endless page with jquery and will_paginate in rails 3?有谁知道我如何 go 关于 jquery 和 will_paginate 在 rails 3 中的无尽页面? I have tried so many ways but it has never worked for me.我尝试了很多方法,但它从未对我有用。

the best option for implementing endless pagination will be using will_paginate / kaminari gem with jquery.实现无限分页的最佳选择是使用 will_paginate / kaminari gem 和 jquery。

there is a good blog on how to implement endless page and hopefully will answer your question.have a look有一个关于如何实现无尽页面的好博客,希望能回答你的问题。看看

http://www.idyllic-software.com/blog/endless-page-using-jquery-and-will_paginate/ http://www.idyllic-software.com/blog/endless-page-using-jquery-and-will_paginate/

See Railscast #114 Endless Page请参阅Railscast #114 无尽页面

You should be able to make it work with Rails 3 with minimal modifications (if any).您应该能够以最少的修改(如果有的话)使其与 Rails 3 一起使用。

Your endless-page.js file will look something like this您的无尽页面.js 文件将如下所示

   var currentPage = 1;
   var autoloading = false;
   if( total_number_of_paginaion_pages > 1) {
       autoloading = true;
     }

function checkScroll() {
  if (autoloading && nearBottomOfPage()) {
    currentPage ++;
    autoloading = false;
    $.ajax( {
      url: window.location,
      data: 'page=' + currentPage,
      beforeSend: function() {
        $('.loading-info').show()
      },
      complete: function(){
        $('.loading-info').hide()
       },
      success: function(data){
        eval(data);
       }
     });
  } 
}

function nearBottomOfPage() {
  return scrollDistanceFromBottom() < 150;
}

function scrollDistanceFromBottom(argument) {
  return $(document).height() - ($(window).height() + $(window).scrollTop());
}

$(window).bind('scroll', function (){
         checkScroll();
});  

And in your js.erb file will look something like this在你的 js.erb 文件中看起来像这样

$('.results-center').append('<%=escape_javascript(render :partial => '/search/search_result') %>');
if(! pagination_last_page) {
  autoloading = true;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM