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>