A basic infinite scrolling pattern for jQuery.
$(window).infinitescroll({url: window.location.href});
$(window).infinitescroll({ url: window.location.href, triggerAt: 150, page: 4, appendTo: 'table.userlist tbody' });
The “page” query parameter is appended to the URL specified
This is determined by handing back an empty response from the server. Once this happens, this plugin stops attempting to load data.
url: default: null The URL to fetch more data to append triggerAt: default: 300 This is the number of pixels from the bottom of the container (defaults to "document") to trigger the fetch for data page: default: 2 The page number to fetch (sets the page=# query parameter in the URL) appendTo: default: ".list tbody" The selector that .append() gets called on container: default: document This is the container used to measure scrolling, and then trigger a load
infinitescroll.beforesend: Fired just before the ajax request is given infinitescroll.finish: Fired after a successful request has finished, and the data has been inserted into the DOM infinitescroll.maxreached: Fired after the first empty response from the server. This will disable any further loading of data.
infinitescroll.scrollpage: This can be used to force a full-cycle load of data and append much like what happens just after the 'infinitescroll.beforesend' event is fired. Note: The plugin is listening for this event to be fired on whatever DOM object you initially bound it to. This assumes one the examples above were used. Example: $(window).trigger('infinitescroll.scrollpage', 1);