evolutionPager jQuery Plugin

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 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>
    <% } %>
<% }); %>