Overview

The Pagination component is used to navigate between different pages of a search results set.

Selector

The selector for this component is <hawksearch-pagination>.

Data Model

The following data model is exposed to the Handlebars template:

{
  page: number;
  pages: Array<number>;
  firstPage: 1;
  lastPage: number;
  firstRecord: number;
  lastRecord: number;
  totalRecords: number;
  totalPages: number;
  maxPageLinks: number;
  displayFirstLink: boolean;
  displayPreviousLink: boolean;
  displayNextLink: boolean;
  displayLastLink: boolean;
  summary: string;
}

If no maximum number of page links to display is configured in the Hawksearch admin interface, a default value of 9 will be used.

Event Binding Attributes

Attribute Name	Attribute Value

Attribute Name	Attribute Value
hawksearch-page	`number`

When an element with this attribute is clicked, the current search will be updated to display the results from the specified page.

Handlebars Helpers

Name	Parameter

Name	Parameter
pageUrl	`number`

This helper function returns the URL for the specified page to enable crawling.

Default Template

<div class="pagination">
    {{#if summary}}
        <div class="pagination__summary">{{summary}}</div>
    {{/if}}
    <div class="pagination__pages">
        {{#if displayFirstLink}}
            <span hawksearch-page="1" class="link pagination__page pagination__page--first" title="First">
                <hawksearch-icon name="chevron-back" size="1.2em"></hawksearch-icon>
            </span>
        {{/if}}
        {{#if displayPreviousLink}}
            <a
                hawksearch-page="{{subtract page 1}}"
                rel="prev"
                href="{{pageUrl (subtract page 1)}}"
                class="pagination__page pagination__page--previous"
                title="Previous"
            >
                <hawksearch-icon name="chevron-left" size="1.2em"></hawksearch-icon>
            </a>
        {{/if}}
        {{#each pages}}
            {{#if (eq this @root.page)}}
                <span class="pagination__page pagination__page--selected">{{this}}</span>
            {{else}}
                <a hawksearch-page="{{this}}" href="{{pageUrl this}}" class="pagination__page">{{this}}</a>
            {{/if}}
        {{/each}}
        {{#if displayNextLink}}
            <a hawksearch-page="{{add page 1}}" rel="next" href="{{pageUrl (add page 1)}}" class="pagination__page pagination__page--next" title="Next">
                <hawksearch-icon name="chevron-right" size="1.2em"></hawksearch-icon>
            </a>
        {{/if}}
        {{#if displayLastLink}}
            <span hawksearch-page="{{totalPages}}" class="link pagination__page pagination__page--last" title="Last">
                <hawksearch-icon name="chevron-forward" size="1.2em"></hawksearch-icon>
            </span>
        {{/if}}
    </div>
</div>

Hawksearch Handlebars UI

Pagination Component