Add jQuery and Auto Pagination scripts:

The html should look similar to:

  
...
  
...
  
...
  ...
  Next

Invoke the JavaScript call:

$(function() {
	$('#content').AutoPagination({
		nextPageSelector: 'a.nextPage',
		panelSelector: 'div.panel'
	});
});

The plugin simply calls the nextPageSelector link using Ajax and adds the panelSelector elements to the current page.

An object of options can optionally be passed to AutoPagination() to modify the default configuration.

$(function() {
	$('#content').AutoPagination({
		nextPageBufferPx: 200,
		nextPageSelector: '.nextPage',
		panelSelector: '.panel',
		loaderDivClass: 'ajax-loader',
		loaderDivStyle: 'text-align:center',
		loaderImage: 'ajax-loader.gif',
		loaderText: 'Loading...'
	});
});

Option	Type	Default	Description
nextPageBufferPx	Integer	200	Pixels threshold from nextPageSelector before auto loading occurs. i.e. If user scroll down and passes 200px from nextPageSelector, auto loading is triggered.
nextPageSelector	String	.nextPage	Selector of next page link. The loading will stop when the link is no longer available on the loaded page.
panelSelector	String	.panel	Selector of DOM elements to be added to the current page. The elements from the loaded page will be added after the last element on the current page.
loaderDivClass	String	ajax-loader	Class of loader div. The class name can be used for css styling. e.g. .ajax-loader { background:#000; color:#fff; }
loaderDivStyle	String	text-align:center	Inline CSS style of loader div.
loaderImage	String	ajax-loader.gif	Absolute path or relative path from js to the loader image. Note: To style the loader image .ajax-loader img { padding:10px; }
loaderText	String	Loading...	If loaderImage is an empty string the loaderText will be displayed instead.

- End of Page -