evolutionPager jQuery Plugin

Ben Tiedt — Tue, 19 Nov 2019 20:29:14 GMT

Current Revision posted to API Documentation by Ben Tiedt on 11/19/2019 20:29:14

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|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 JavaScript API Module|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 load
- complete: 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 content
pagedContentPagingEvent: 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
transition: 'slide', 'fade', or 'null
- default: null
transitionDuration: transition duration
- default: 250

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">
            <span>&#171;</span>
        </a>
    <% } else if(link.type === "previous") { %>
        <a href="<%: link.url %>" class="previous" data-type="previous" data-page="<%= link.page %>" data-selected="false">
            <span>&#60;</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" %>">
            <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">
            <span>&#62;</span>
        </a>
    <% } else if(link.type === "last") { %>
        <a href="<%: link.url %>" class="last" data-type="last" data-page="<%= link.page %>" data-selected="false">
            <span>&#187;</span>
        </a>
    <% } %>
    <% if(i < (links.length - 1)) { %>
        <span class="separator"></span>
    <% } %>
<% }); %>