Pageless is a jQuery plugin. As you scroll down you see more results coming back at you automatically. It provides an automatic pagination in an accessible way : if javascript is disabled your standard pagination is supposed to work.
currentPage: current page (params[:page])distance: distance to the end of page in px when ajax query is firedloader: selector of the loader div (ajax activity indicator)loaderHtml: html code of the div if loader not usedloaderImage: image inside the loaderloaderMsg: displayed ajax messagepagination: selector of the paginator divs. (if javascript is disabled paginator is required)params: paramaters for the ajax query, you can pass auth_token heretotalPages: total number of pagesurl: URL used to request more datascrape: A function to modify the incoming data. (Doesn't do anything by default)complete: A function to call when a new page has been loaded (optional)end: A function to call when the last page has been loaded (optional)
In the example directory you'll find a Rails app that just runs. It demonstrates the basic usage of pageless scrolling.
$ rails server
Then just navigate to http://localhost:3000 and enjoy!
-
Copy 'jquery.pageless.min.js' into your /public/javascripts directory.
-
Make sure that you are have jquery included: = javascript_include_tag 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'
-
Include the pageless javascript in the head of your application layout. = javascript_include_tag 'jquery.pageless.min.js'
-
Add the following to helpers/application_helper.rb
def pageless(total_pages, url=nil, container=nil) opts = { :totalPages => total_pages, :url => url, :loaderMsg => 'Loading more results' } container && opts[:container] ||= container javascript_tag("$('#results').pageless(#{opts.to_json});") end -
If you haven't added the will_paginate helper to the view you want to paginate, add it now. Also, add the pageless helper you just created.
<%= pageless(@articles.total_pages, articles_path) %>
6. Ensure that there is a a DOM object with the an id of results (or whatever you defined in your pageless helper), such as a div or table that the AJAXed results will be loaded in.
7. In your ArticlesController, append this to your index action below the instance variable:
`if request.xhr?
render :partial => @articles`
- Restart your application. You now have pageless scrolling. Usage
$('#results').pageless({ totalPages: 10
, url: '/articles/'
, loaderMsg: 'Loading more results'
});