Simplified jQuery ajax pagination

Easily rig a custom DOM for ajax pagination requests.

⚠️ This project is very much a work in progress and should not be used in production.

1. Requirements 2. Basic usage 3. Events & Methods 4. Examples

Requirements

This library has been built and tested with jQuery 3 and up.

Download here »

Basic usage

1. Include the library via jsDelivr CDN

<script src="https://cdn.jsdelivr.net/gh/thelevicole/[email protected]/dist/ajax-pager.js"></script>

2. Attach to an element

var $gallery = $( '#gallery' ).ajaxPager( {
    url: 'https://example.com/api/gallery',
    totalPages: 10,
    data: { /* ..additional data to send with request.. */ }
} );

3. Rig the DOM

<div id="gallery"></div>
<button id="load">Load more</button>
$( '#load' ).on( 'click', function() {
    $gallery.loadMore();
} );

$gallery.on( 'ap.request.done', function( event, response ) {
    $gallery.append( response.html );
} );

Events & Methods

Name Description Example
Events
'ap.request.start' Fired before a request is made. Useful for showing a loading icon. 
$gallery.on( 'ap.request.start', function() {
	$( '#loading' ).show();
} );
'ap.request.done' Fired right after a request has successully completed. 
$gallery.on( 'ap.request.done', function( event, data, textStatus, jqXHR ) {
	$gallery.append( data.html );
} );
'ap.request.catch' Fired if a request failed. 
$gallery.on( 'ap.request.catch', function( event, jqXHR, textStatus, errorThrown ) {
	alert( 'Request failed. Try again.' );
} );
'ap.request.finally' Fired after every request, successfull or not. Useful for hiding a loading icon. 
$gallery.on( 'ap.request.finally', function( event, jqXHR, textStatus, errorThrown ) {
	$( '#loading' ).hide();
} );
Methods
loadMore() Initiate a request. 
$( '#load' ).on( 'click', function() {
    $gallery.loadMore();
} );
hasMore() Returns boolean value. 
if ( $gallery.hasMore() ) {
	$( '#load' ).show();
} else {
	$( '#load' ).hide();
}
currentPage() Returns integer value of the current page number. 
$( '#stats' ).text( 'Current page: ' + $gallery.currentPage() );
resetPage() Reset the internal page counter to 0 
$gallery.resetPage();
setPage( page ) Override the internall page counter. 
<ul class="pagination">
	<li><a href="#1">1</a></li>
	<li><a href="#2">2</a></li>
	<li><a href="#3">3</a></li>
	<li><a href="#4">4</a></li>
</ul>
$( '.pagination a' ).on( 'click', function() {
	$gallery.setPage( $( this ).text() );
} );
updateOptions( options ) Update options that were set when originally initiating the library. 
$gallery.updateOptions( {
	url: 'https://example.com/api/videos'
} );

Examples

Common usage

HTML

<div id="users"></div>
	<button id="loadmore" type="button">Load more</button>

JavaScript

var $button = $( '#loadmore' );
var $pager = $( '#users' ).ajaxPager( {
	url: 'https://reqres.in/api/users',
	totalPages: 4
} );

$button.on( 'click', function() {
	$pager.loadMore();
} );

$pager.on( 'ap.request.done', function( event, response ) {
	if ( response.data.length ) {
		for ( var i = 0; i < response.data.length; i++ ) {
			var user = response.data[ i ];
			$pager.append( '<div><h3>' + user.first_name + '' + user.last_name + '</h3></div>' );
		}
	}
} );

Playground