Need help with jquery-infinite-pages?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

magoosh
116 Stars 55 Forks MIT License 37 Commits 23 Opened issues

Description

Simple infinitely scrolling pages for jQuery, gemified for Rails

Services available

!
?

Need anything else?

Contributors list

# 118,141
Ruby
Rails
Shell
TypeScr...
27 commits
# 271,661
HTML
CSS
webpack...
sidekiq
1 commit
# 429,464
Ruby
Redis
Shell
1 commit
# 726,535
Ruby
1 commit

jQuery Infinite Pages

Gem Version

A light-weight jQuery plugin for adding infinite scrolling to paginated HTML views that tastes great with Rails and Kaminari.

This project was originally designed for Rails, but the core plugin is flexible enough to use anywhere.

Installation

Add this line to your application's

Gemfile
:
ruby
gem 'jquery-infinite-pages'

And then execute:

bundle install

Add to your

application.js
file:
javascript
//= require jquery.infinite-pages

Non-Rails

Just copy the

jquery.infinite-pages.js.coffee
file from
app/assets/javascripts
to wherever you want it.

Usage

jQuery Infinite Pages binds to an element containing a

rel="next"
pagination link and watches for scroll events.

When the link is close to the bottom of the screen, an async request to the next page is triggered. The server's response should then append the new page and update the pagination link.

# Setup plugin and define optional event callbacks
$('.infinite-table').infinitePages
 debug: true
 buffer: 200 # load new page when within 200px of nav link
 context: '.pane' # define the scrolling container (defaults to window)
 loading: ->
   # jQuery callback on the nav element
   $(this).text("Loading...")
 success: ->
   # called after successful ajax call
 error: ->
   # called after failed ajax call
   $(this).text("Trouble! Please drink some coconut water and click again")

You can also manually control the firing of load events:

# Force load of the next page
$('.infinite-table').infinitePages('next')

Pause firing of events on scroll

$('.infinite-table').infinitePages('pause')

Resume...

$('.infinite-table').infinitePages('resume')

Rails/Kaminari Example

The following is an example of how to integrate this plugin into your Rails app using Kaminari.

Set up pagination in

lessons_controller.rb
:
class LessonsController
  def index
    @lessons = Lesson.order('lessons.name ASC').page(params[:page])
  end
end

Write the template for your list of lessons in

app/views/lessons/index.html.erb
:
'lessons', :object => @lessons %>
Lesson

true) %>

...and

app/views/lessons/_lessons.html.erb
:
  
     ()
    
  

Append new data to the table in

app/views/lessons/index.js.erb
:
// Append new data
$(" 'lessons', :object => @lessons) %>")
  .appendTo($(".infinite-table table"));

// Update pagination link

$('.pagination').html("That's all, folks!");

$('.pagination') .html(" true) %>");

At this point, the pagination link at the bottom of your table should allow you to load the next page without refreshing. Finally, we trigger the next page load with the

infinitePages
plugin in
app/assets/javascripts/lessons.js.coffee
:
$ ->
  # Configure infinite table
  $('.infinite-table').infinitePages
    # debug: true
    loading: ->
      $(this).text('Loading next page...')
    error: ->
      $(this).button('There was an error, please try again')

Voila! You should now have an infinitely long list of lessons.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.