Type:

boolean

Default:

true

Whether to display a link to the previous page in the page links.

Initiate a pager that doesn’t display a previous link

$("#myPager").ajaxPager({previous: false})

Type:

string

Default:

<

The text to display inside the previous page link.

Initiate a pager that has a previous link text Previous rather than <

$('#myPager').ajaxPager({previousText: "Previous"})

Type:

boolean

Default:

true

Whether to display a link to the next page in the page links.

Initiate a pager that doesn’t display a next link

$('#myPager').ajaxPager({next: false})

Type:

string

Default:

>

The text to display inside the next page link.

Initiate a pager that has a next link text Next rather than >

$('#myPager').ajaxPager({previousText: "Next"})

Type:

boolean

Default:

true

Whether to display a link to the first page in the page links.

Initiate a pager that doesn’t display a first link

$('#myPager').ajaxPager({first: false})

Type:

string

Default:

|<

The text to display inside the first page link.

Initiate a pager that has a first link text First rather than |<

$('#myPager').ajaxPager({firstText: "First"})

Type:

boolean

Default:

true

Whether to display a link to the last page in the page links.

Initiate a pager that doesn’t display a last link

$('#myPager').ajaxPager({last: false})

Type:

string

Default:

>|

The text to display inside the last page link.

Initiate a pager that has a last link text of “Last” rather than >|

$('#myPager').ajaxPager({lastText: "Last"})

Type:

integer

Default:

2

The number of page links to display at the start of the list regardless of the current position.

Initiate a pager with links to pages 1, 2, and 3 at the beginning of the page links regardless of the current page.

$('#myPager').ajaxPager({linkPagesStart: 3})

Type:

integer

Default:

5

The number of page links to display before the currently active page.

Initiate a pager with links to each of the 10 pages before the current page.

$('#myPager').ajaxPager({linkPagesBefore: 10})

Type:

integer

Default:

5

The number of page links to display after the currently active page.

Initiate a pager with links to each of the 10 pages after the current page.

$('#myPager').ajaxPager({linkPagesAfter: 10})

Type:

integer

Default:

2

The number of page links to display at the end of the list regardless of the current position.

Initiate a pager with links to each of the final 3 pages at the end of the page links regardless of the current page.

$('#myPager').ajaxPager({linkPagesEnd: 3})

Type:

string

Default:

…

The text to mark a break in the page links. Set to false to have unmarked breaks.

Initiate a pager with no unmarked breaks.

$('#myPager').ajaxPager({linkPagesBreak: false})

Initiate a pager with breaks marked by the text “break”.

$('#myPager').ajaxPager({linkPagesBreak: "break"})

Type:

boolean/int

Default:

0

The number of pages to preload ahead of the current page. Setting to false will not preload any pages, true will preload them all. Using a boolean value is a global default and can be overridden in a page’s options.

Initiate a pager where the next three pages are preLoaded.

$('#myPager').ajaxPager({preLoad:3})

Initiate a pager where the pages aren’t preloaded by default.

$('#myPager').ajaxPager({preLoad: false})

Type:

int

Default:

0

The number of pages to preload behid of the current page.

Initiate a pager where the previous three pages are preLoaded.

$('#myPager').ajaxPager({preLoadPrevious:3})

Type:

integer

Default:

1

The number of the initial page to load.

Initiate a pager where the second page is shown.

$('#myPager').ajaxPager({page:2})

Type:

string

Default:

ajax

The default page type, valid values include:

• string: content is defined inside the page’s content option.
• ajax: content is loaded from an ajax request from the page’s url option.
• iframe: content is an iframe who’s src is the page’s url options.
• element: content is retrieved from the first element to match the page’s selector option.

Initiate a pager where the default content type is string.

$('#myPager').ajaxPager({type:"string"})

Type:

string

Default:

null

The default page selector, any instances of {i} in the selector will be replaced with the page number as digit eg “2″, any instances of {k} are replaced with the number as a word eg “two”. For pages of type element this will search the current pages for matches of this selector and use it’s contents. For pages of type ajax this will search the response for matches of this selector and use it’s contents.

Initiate a pager where the default selector selects a element with an id of pageX where X is the page number.

$('#myPager').ajaxPager({type:"element",selector:"#page{i}"})

Type:

boolean

Default:

true

The default page option for destoryOriginal. For pages of type element this whether or not to destroy the element that the content was retrieved from.

Initiate a pager where unless set in the page options, a page of type element will not remove the original element.

$('#myPager').ajaxPager({type:"element",selector:"#page{i}",destroyOriginal:false})

Type:

int

Default:

1

The number of the initial page to load.

Initiate a pager where the second page is shown.

$('#myPager').ajaxPager({page:2})

Type:

string

Default:

null

A string to insert at the beginning of each page, {i} will be replaced with the page number as digit eg “2″, any instances of {k} are replaced with the number as a word eg “two”.

Initiate a pager each page has a prefix of a title with the page’s number in.

$('#myPager').ajaxPager({pagePrefix:"<h3>Page {i}</h3>"})

Type:

string

Default:

null

A string to insert at the end of each page, {i} will be replaced with the page number as digit eg “2″, any instances of {k} are replaced with the number as a word eg “two”.

Initiate a pager each page has a suffix of a not with the page’s number in.

$('#myPager').ajaxPager({pageSuffix:"<p>That was page {i}.</p>"})

Type:

string

Default:

Loading…

A string to insert into the page while it’s content is loading. {i} will be replaced by the page number as digit eg “2″, any instances of {k} are replaced with the number as a word eg “two”.

Initiate a pager where each page displays Loading page x… while its loading.

$('#myPager').ajaxPager({loadingText:"<p&gtLoading page {i}...</p&gt"})

Type:

boolean

Default:

true

Whether or not to use unused links from any of the sections (start, end, before, after) on the other side of current page. This leads to a consistent number of displayed page links despite where you are in the page order.

Initiate a pager were as it gets to the end places from the linkPagesAfter that aren’t used are transfered to the linkPagesBefore.

$('#myPager').ajaxPager({linkOverflow:true, linkPagesAfter:5, linkPagesBefore:1})

Type:

string

Default:

below

Where to place the links in the order of the DOM, can be: ‘above’, ‘below’ or ‘both’.

Initiate a pager where the page links are displayed before the pager.

$('#myPager').ajaxPager({linkPosition:'above'})

Type:

string

Default:

{i}

Text to use for links, {i} is replace by the page number as a digit eg “2″, {k} is replaced with the page number as a word eg “two”.

Initiate a pager where the page links are displayed as Page X.

$('#myPager').ajaxPager({linkText:'Page {k}'})

Type:

function

Default:

null

Function to handle ajax data before it is used by the pager, the data is passed into the function in the first argument.

Initiate a pager where ajax data is treated and bs are replaced with ds.

$('#myPager').ajaxPager({treatData:function (data) { return data.replace(/b/g,"d");}})

Type:

boolean

Default:

true

Whether or not to cache ajax responses.

Initiate a pager where ajax request are rerequested each time.

$('#myPager').ajaxPager({useCache:false})

Type:

boolean

Default:

true

Whether or not to animate page swaps. In order for the built in animations to work properly each page (div.ajaxPagerPage) and their animation handler (div.animationHandler) need to be positioned absolutely, have top, left, right, and bottom attributes set to 0px and have a fixed height and width. Built in animations include: fade, slide up, slide down, slide left, slide right, swipe up, swipe down, swipe left, swipe right. The direction (up, down, left, right) indicates the direction from when animating in and the direction to when animating out.

Initiate a pager that does not animate on page swaps.

$('#myPager').ajaxPager({animation:false})

Type:

string

Default:

slide left

How to animate pages in

Initiate a pager where page fade in.

$('#myPager').ajaxPager({animationIn:'fade'})

Type:

string

Default:

slide right

How to animate pages out

Initiate a pager where pages fade out.

$('#myPager').ajaxPager({animationOut:'fade'})

Type:

string

Default:

slide right

How to animate pages in, when swapping to a previous page.

Initiate a pager where page slide in from the left when choosing a previous page.

$('#myPager').ajaxPager({animationInPrevious:'slide left'})

Type:

string

Default:

slide right

How to animate pages out, when swapping to a previous page.

Initiate a pager where pages slide out to the right when choosing a previous page.

$('#myPager').ajaxPager({animationOutPrevoius:'slide right'})

Type:

int

Default:

300

How long to take animating pages in, value is in milliseconds.

Initiate a pager where pages take 1 second to animate in.

$('#myPager').ajaxPager({animationInDuration:1000})

Type:

boolean/int

Default:

true

Whether to overlap animations in and out. True runs both in and out animations at the same time, false will run the in animation once the out animation has finished. An integer value will run the in animation that long (in milliseconds) before the end of the out animation.

Initiate a pager where animations don’t animate.

$('#myPager').ajaxPager({animationOverlap:false})

Type:

boolean

Default:

true

Whether to fade loading text out, and content in once it has loaded.

Initiate a pager where the loading text does not fade out.

$('#myPager').ajaxPager({fadeLoading:false})

Type:

int

Default:

300

Time taken (in milliseconds) to fade loading text out and fade content in.

Initiate a pager where the loading text fades out in half a second and then content fades in in half a second.

$('#myPager').ajaxPager({fadeLoadingDuration:1000})

Type:

string

Default:

swing

Easing to use when animating pages in, out of the box options with jQuery UI are linear and swing.

Initiate a pager where the pages animating in use a linear easing.

$('#myPager').ajaxPager({easingIn:'linear'})

Type:

string

Default:

swing

Easing to use when animating pages out, out of the box options with jQuery UI are linear and swing.

Initiate a pager where the pages animating in use a linear easing.

$('#myPager').ajaxPager({easingOut:'linear'})

Type:

int

Default:

300

How long to take animating pages out, value is in milliseconds.

Initiate a pager where pages take 1 second to animate out.

$('#myPager').ajaxPager({animationOutDuration:1000})

Type:

array

Default:

see below

An array of custom animations to use. Each animation is an object with the following nested objects ‘in’, ‘out’, ‘maskIn’, ‘maskOut’, which are a set of css properties and values. ‘in’ is the css when the page is showing and ‘out’ is the css when the page is not. ‘maskIn’ and ‘maskOut’ are applied to a wrapper div and are used for things like the swipe animations. Custom animations are merged with the build in ones. See the source file (jquery.ajaxpager.js) to see how the built in animations work, they can be found in the _animation property towards the end of the file.

Type:

array

Default:

null

An array of page options objects that represents the pager’s pages. See page options for possible values.

Initiate a pager with a page of each type.

$('#myPager').ajaxPager({pages:Array(
{
type: "ajax",
url: "/page1.html"
},
{
type: "iframe",
url: "/page2.html"
},
{
type: "element",
selector: "#page3",
},
{
type: "string",
content: "This is page 4",
}
)})

Type:

string

Default:

null

The type of page, see pager page types for possible values.

Type:

string

Default:

null

The content for pages of type string.

Initiate a pager where the first page’s content is a static string.

$('#myPager').ajaxPager({
pages: Array(
{type:"string",content:"This is page 1"}
)
})

Type:

string

Default:

null

For pages of type ajax this is the location of the ajax request. For pages of type iframe this will be used for the iframe’s src.

Initiate an pager with a ajax and iframe page from /page1.html and /page2.html respectively.

$('#myPager').ajaxPager({
pages: Array(
{type:"iframe",url:"/page1.html"},
{type:"ajax",url:"/page2.html"}
)
})

Type:

string

Default:

null

For pages of type ajax the ajax response will be search for matches and the first match’s inner html will be used for the page’s content. For pages of type element the current document will be search for matches and the first’s inner html will be used for the page’s content.

Initiate an pager with a ajax and element pages where the content is inside a div with class of pageX where X is the page number.

$('#myPager').ajaxPager({
pages: Array(
{type:"element",selector:"div.page1"},
{type:"ajax",url:"/pages.html",selector:"div.page2"}
)
})

Type:

boolean

Default:

true

For pages of type element whether or not to destroy the element that the content was retrieved from.

Initiate an pager with a page that gets it content from an element inside the current document and keeps the original.

$('#myPager').ajaxPager({
pages: Array(
{type:"element",selector:"div.page1",destoryOriginal:false},
)
})

Type:

string

Default:

null

A string to insert at the beginning of the page, overrides the pagers pagePrefix option.

Type:

string

Default:

null

A string to insert at the end of the page, overrides the pagers pageSuffix option.

Type:

string

Default:

Loading…

A string to insert in the page while it is still loading. Overrides the pagers loadingText option.

Type:

string

Default:

{i}

Text to use for the pages link, {i} is replace by the page number as a digit eg “2″, {k} is replaced with the page number as a word eg “two”.

Type:

function

Default:

function (data) {return data;}

Function to handle ajax data before it is used by the pager, the data is passed into the function in the first argument.

Type:

boolean

Default:

false

Whether or not to preload this page before it is shown.

Type:

boolean

Default:

true

Whether or not to use the cached value for this page’s url.

Type:

boolean

Default:

true

Whether or not to animate this page.

Type:

string

Default:

slide left

How to animate this page in.

Type:

string

Default:

slide right

How to animate this page out.

Type:

string

Default:

slide right

How to animate this page in when swapping to a previous page.

Type:

string

Default:

slide right

How to animate this page out when swapping to a previous page.

Type:

int

Default:

300

How long this page should take animating in.

Type:

boolean/int

Default:

true

Whether to overlap this pages in animation with the previous’ out. True runs both in and out animations at the same time, false will run the in animation once the out animation has finished. An integer value will run the in animation that long (in milliseconds) before the end of the out animation.

Type:

boolean

Default:

true

Whether to fade this pages loading text out, and content in once it has loaded.

Type:

int

Default:

300

Time taken (in milliseconds) to fade this pages’ loading text out and fade content in.

Type:

string

Default:

swing

Easing to use when animating this page in, out of the box options with jQuery UI are linear and swing.

Type:

string

Default:

swing

Easing to use when animating this page out, out of the box options with jQuery UI are linear and swing.

Type:

int

Default:

300

How long to take animating this page out, value is in milliseconds.

Type:

This event is trigged when a page is shown. i is the shown page.

Initiate a pager that triggers an alert when a page is shown.

$('#myPager').ajaxPager({onPageShow:function(i) { alert("page "+i+" was shown" }})

Type:

This event is trigged when a page content’s is loaded, for pages other than type ajax and iframe this is when the pager is initiated. i is the loaded page.

Initiate a pager that triggers an alert when a page is loaded.

$('#myPager').ajaxPager({onPageLoad:function(i) { alert("page "+i+" was loaded" }})

Type:

This event is trigged when a page is shown.

Initiate a pager that triggers an alert when the first page is shown.

$('#myPager').ajaxPager({pages:array(
{type:"element",selector:"div.page1",onShow:function(){alert("showing page 1")}},
{type:"ajax",url:"/pages.html",selector:"div.page2"}
)})

Type:

This event is trigged when a page is loaded.

Initiate a pager that triggers an alert when the first page is loaded.

$('#myPager').ajaxPager({pages:array(
{type:"element",selector:"div.page1",onLoad:function(){alert("showing page 1")}},
{type:"ajax",url:"/pages.html",selector:"div.page2"}
)})

Arguments

• pageNumber

Sets the current page to pageNumber.

Set a pager’s page to page 3.

$('#myPager').ajaxPager("setPage",3)

Set a pager’s page to the next one.

$('#myPager').ajaxPager("nextPage")

Set a pager’s page to the previous one.

$('#myPager').ajaxPager("previousPage")

Show the pager’s last page.

$('#myPager').ajaxPager("lastPage")

Show the pager’s first page.

$('#myPager').ajaxPager("firstPage")

Arguments

• pageNumber

Load a page if it’s not all ready been loaded.

Load the pager’s forth page, without showing it.

$('#myPager').ajaxPager("loadPage",4)

Arguments

• pageNumber

Reload a page even if it’s already been loaded.

Reload the pager’s forth page, without showing it.

$('#myPager').ajaxPager("reloadPage",4)

Reload all pages.

$('#myPager').ajaxPager("reloadAll")

Reload all pages.

$('#myPager').ajaxPager("reloadAll")

Arguments

• pageNumber

Reload a page when it is next requested.

Reload page 3 when it is next clicked.

$('#myPager').ajaxPager("reloadPageOnDemand",3)

Reload all pages, when each is next requested.

$('#myPager').ajaxPager("reloadAllOnDemand")

Add a new first page.

$('#myPager').ajaxPager("addPage",{pageNumber:1,type:'static',content:'New custom first page.'})

Remove the first page.

$('#myPager').ajaxPager("removePage",1)

Reload all pages, when each is next requested.

$('#myPager').ajaxPager("reloadAllOnDemand")