Ever wondered how some sites seem to have endless scrolling page with no pagination? Find out how easy it is to do this in Rails in this episode.
# products_controller.rb
def index
@products = Product.paginate(:page => params[:page], :per_page => 15)
end
# index.js.rjs
page.insert_html :bottom, :products, :partial => @products
if @products.total_pages > @products.current_page
page.call 'checkScroll'
else
page[:loading].hide
end
# application_helper.rb
def javascript(*args)
content_for(:head) { javascript_include_tag(*args) }
end
<!-- index.html.erb -->
<% title "Products" %>
<% javascript :defaults, 'endless_page' %>
<div id="products">
<%= render :partial => @products %>
</div>
<p id="loading">Loading more page results...</p>
// endless_page.js
var currentPage = 1;
function checkScroll() {
if (nearBottomOfPage()) {
currentPage++;
new Ajax.Request('/products.js?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
} else {
setTimeout("checkScroll()", 250);
}
}
function nearBottomOfPage() {
return scrollDistanceFromBottom() < 150;
}
function scrollDistanceFromBottom(argument) {
return pageHeight() - (window.pageYOffset + self.innerHeight);
}
function pageHeight() {
return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}
document.observe('dom:loaded', checkScroll);
分享到:
相关推荐
Endless-RecyclerView >Endless support for RecyclerView Gradle Dependency dependencies { compile '... public void onLoadMore(int page) { ..... endless.loadMoreComplete(); } })
语言:English 此扩展程序使您可以启动和停止无休止地向下滚动网站页面。 此扩展程序使您可以启动和停止无休止地向下滚动网站页面。 只需单击扩展图标和“开始”按钮即可开始滚动,单击“停止”按钮即可完成滚动。
- fixed bug when Engine try to split non-stretcheable view and gone to endless loop - fixed bug with HTML tags in memo when use shot text and WordWrap - [enterprise] fixed bug with variables lost on ...
- fixed bug when Engine try to split non-stretcheable view and gone to endless loop - fixed bug with HTML tags in memo when use shot text and WordWrap - [enterprise] fixed bug with variables lost on ...
- fixed bug with endless loop in TfrxRichView - fixed bug with Unicode in TfrxMemoView appeared in previous release - improved MAPI interface in TfrxExportMail export - fixed some problems with ...
- fixed bug with endless loop with using vertical bands together with page header and header with ReprintOnNewPage - fixed bug when using "Keeping" and Cross tables (incorrect cross transfer) - fixed ...
- fixed bug with endless loop with using vertical bands together with page header and header with ReprintOnNewPage - fixed bug when using "Keeping" and Cross tables (incorrect cross transfer) - fixed ...
这是一套完整的源码,是我用20美刀买回来的,里面包含所有资源,甚至说明文档和可以修改的PSD文件、PNG图片文件。 演示地址: ...Enjoy using Metronic and stay tuned to endless amazing updates!
- fixed bug when Engine try to split non-stretcheable view and gone to endless loop - fixed bug when group doesn't fit on the whole page - fixed bug with displacement of subreport when use ...
Endless data views for your end-users See OLAP for WinForms in Action Get an overview of what OLAP is, see how easy it is to use OLAP for WinForms, specifically the C1OlapPage control, and explore ...
You can create reports of any size with nearly endless layout options. § Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in-memory objects and...
You can create reports of any size with nearly endless layout options. § Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in-memory objects and...
You can create reports of any size with nearly endless layout options. § Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in-memory objects and...
You can create reports of any size with nearly endless layout options. Rich Data Binding Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in...
You can create reports of any size with nearly endless layout options. Rich Data Binding Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in...
You can create reports of any size with nearly endless layout options. Rich Data Binding Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in...
You can create reports of any size with nearly endless layout options. Rich Data Binding Rich Data Binding .NET data sources allow you to connect to any of the standard databases, plus .NET in...
The list is endless. Also, you should use different passwords for each account. Because if you use only one password everywhere and someone gets this password you have a problem... A serious problem....
"endless page" mode images handling, increased speed the "Reset page numbers" mode for groups reports crypting (Rijndael algorithm) report inheritance (both file-based and dfm-based) drill-down ...
* You can set individual dropdown widths for menu items via the Page Class Suffix, for example: columnwidth-200. * You can turn off background images for a specific menu via the Menu Class Suffix, for...