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 |
|---|---|
hawksearch-page |
|
When an element with this attribute is clicked, the current search will be updated to display the results from the specified page.
Default Template
<div class="pagination">
{{#if summary}}
<div class="pagination__summary">{{summary}}</div>
{{/if}}
<div class="pagination__pages">
{{#if displayFirstLink}}
<a hawksearch-page="1" class="pagination__page pagination__page--first" title="First">
<hawksearch-icon name="chevron-back" size="1.2em"></hawksearch-icon>
</a>
{{/if}}
{{#if displayPreviousLink}}
<a hawksearch-page="{{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}}" class="pagination__page">{{this}}</a>
{{/if}}
{{/each}}
{{#if displayNextLink}}
<a hawksearch-page="{{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}}
<a hawksearch-page="{{totalPages}}" class="pagination__page pagination__page--last" title="Last">
<hawksearch-icon name="chevron-forward" size="1.2em"></hawksearch-icon>
</a>
{{/if}}
</div>
</div>