jQuery.fn.evolutionPager
This plugin renders a paging UI, supporting both ajax and non-ajax based paging. It is typically not called directly, but rather by the page UI component, which is also not typically used directly, but rather by calls to the $core_v2_ui.Pager()
Widget API method.
Usage
Initializes a pager where SELECTOR
is a <span>
.
$('SELECTOR').evolutionPager(options)
By default, this will render a set of paging links which navigate the browser.
If onPage
and the other ajax-related options are provided, links will not navigate the browser, but publish paging event messages. The plugin will also subscribe to these same messages and use the supplied onPage
function to request a new page of content to replace within the pagedContentContainer
.
Options
-
currentPage
: Current page index- default: 0
-
pageSize
: Items per page- default: 10
-
totalItems
: Total items- default: 0
-
showPrevious
: (boolean) Whether 'previous' links should be shown- default: false
-
showNext
: (boolean) Whether 'next' links should be shown- default: false
-
showFirst
: (boolean) Whether 'first' links should be shown- default: true
-
showLast
: (boolean) Whether 'last' links should be shown- default: true
-
showIndividualPages
: Whether individual pages should be shown- default: true
-
numberOfPagesToDisplay
: Number of individual pages to show- default: 5
-
pageKey
: Name of the query string key to use to hold page index- default: 'pi'
-
hash
: Explicit hash target for links- default: ''
-
baseUrl
: Base URL- default: current URL (window.location.href)
template
: template for rendering links
Ajax-Related Options
When provided, performs paging via usage of onPage
(which will typically be defined to perform an ajax request) instead of navigation. Most of these are usually not necessary to define specifically, but are defined by usage of $core_v2_ui.Pager()
where PagedContentFile
or PagedContentUrl
are passed.
-
onPage
: function callback which is invoked to load a new page of content asynchronously. Passed parameters:pageIndex
: page index of content to loadcomplete
: callback function to invoke when content is ready to be passed back to the plugin. Must be passed the content.hash
: object of other key/value pairs serialized in the current url's hash
pagedContentContainer
: selector of element to update with newly received contentpagedContentPagingEvent
: message to publish and subscribe to about a requested page change. Typically unique per widget and defined by$core_v2_ui.Pager()
.pagedContentPagedEvent
: message to publish and subscribe to about a requested page change. Typically unique per widget and defined by$core_v2_ui.Pager()
.-
refreshOnAnyHashChange
: when true, triggers an onPage for any change of the hash, not just the page key- default:
false
- default:
-
transition
: 'slide', 'fade', or 'null- default:
null
- default:
-
transitionDuration
: transition duration- default:
250
- default:
Default Template
<% foreach(links, function(link, i) { %>
<% if(link.type === "first") { %>
<a href="<%: link.url %>" class="first" data-type="first" data-page="<%= link.page %>" data-selected="false" title="<%= link.label %>">
<span>«</span>
</a>
<% } else if(link.type === "previous") { %>
<a href="<%: link.url %>" class="previous" data-type="previous" data-page="<%= link.page %>" data-selected="false" title="<%= link.label %>">
<span><</span>
</a>
<% } else if(link.type === "page") { %>
<a href="<%: link.url %>" class="page<%= link.selected ? " selected" : "" %>" data-type="page" data-page="<%= link.page %>" data-selected="<%= link.selected ? "true" : "false" %>" title="<%= link.label %>">
<span><%= link.page %></span>
</a>
<% } else if(link.type === "next") { %>
<a href="<%: link.url %>" class="next" data-type="next" data-page="<%= link.page %>" data-selected="false" title="<%= link.label %>">
<span>></span>
</a>
<% } else if(link.type === "last") { %>
<a href="<%: link.url %>" class="last" data-type="last" data-page="<%= link.page %>" data-selected="false" title="<%= link.label %>">
<span>»</span>
</a>
<% } %>
<% if(i < (links.length - 1)) { %>
<span class="separator"></span>
<% } %>
<% }); %>