HexagonJS
Edit Page
Paginator
Component for selecting a page from a range.
Examples

HTML

<div id="example"></div>

JavaScript

var paginator = new hx.Paginator('#example', {
  pageCount: 20,
  visibleCount: 10
})

HTML

<div id="v2example"></div>

JavaScript

var paginator = new hx.Paginator('#v2example', {
  pageCount: 20,
  page: 10,
  v2Features: {
    useAccessibleRendering: true,
  }
})
Api
Prototypes
hx.PaginatorextendsEventEmitter
Component for selecting a page from a range.
Constructors
hx.PaginatorselectorString / HTMLElementoptionsObject
Sets up a paginator.
Arguments
selectorString / HTMLElement
A CSS selector or a HTMLElement that identifies the container for your paginator.
options
Properties
visibleCountNumberdeprecated
Deprecated
The visibleCount will be replaced in version 2 with the padding option.
The number of pages visible in the paginator.
Default: 10
currentPageAriaString
The text to use for the aria-label on the current page to enable screen readers to navigate using the paginator
This string can contain $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX'
Default: hx.userFacingText('paginator', 'currentPageAria')
gotoPageAriaString
The text to use for the aria-label on the numeric page buttons to enable screen readers to navigate using the paginator
This string can contain $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX'
Default: hx.userFacingText('paginator', 'gotoPageAria')
nextPageAriaString
The text to use for the aria-label on the next page button to enable screen readers to navigate using the paginator
This string can contain $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX'
Default: hx.userFacingText('paginator', 'nextPageAria')
nextTextString
The text to display in the next button
Default: hx.userFacingText('paginator', 'next')
pageNumber
The page index to set. This index is 1 based.
Default: 1
pageCountNumber
The number of pages to give the paginator.
Default: 10
paginatorAriaString
The text to use for the aria-label on the container to enable screen readers to navigate using the paginator
Default: hx.userFacingText('paginator', 'paginatorAria')
prevPageAriaString
The text to use for the aria-label on the previous page button to enable screen readers to navigate using the paginator
This string can contain $page which will be replaced by the paginator when rendering (e.g. 'XXX $page XXX' would be converted to 'XXX 4 XXX'
Default: hx.userFacingText('paginator', 'prevPageAria')
prevTextString
The text to display in the previous button
Default: hx.userFacingText('paginator', 'prev')
updatePageOnSelectBoolean
Whether to update the current page when updating the paginator value. Set to false when wrapping with another component that should control the currently active page.
Default: true
v2Features
Properties
paddingNumber
The padding to display either side of the 'active' page when using accessible rendering.
The recommended value is 2 however there are some cases where it is more useful to make a larger selection of pages available
This will be converted to a standard option in version 2.0.0
Default: 2
showCenteredBoolean
Whether to align the paginator centrally in the container
Default: false
useAccessibleRenderingBoolean
Whether to use a more accessible HTML structure to allow screen readers to use the Paginator correctly.
This will be the default behaviour in version 2.0.0
Default: false
Events
change
Emitted when the selected page is changed.
Properties
selectedNumberdeprecated
Deprecated
This has been renamed to value for consitency with other Hexagon events. This property will be removed in version 2.0.0
The selected page (1 based index).
causeString
Will be either 'user' or 'api'. 'user' means that the user clicked on the paginator to cause the page to change, 'api' means that one of the methods on the paginator (such as setPage) was called to cause the change.
valueNumber
The selected page (1 based index).
Methods
visibleCountcountNumberPaginatordeprecated
Deprecated
The visibleCount will be replaced in version 2 with the padding option.
Sets the number of pages that are shown at once.
Arguments
countNumber
The number of pages visible in the paginator.
Default: 10
Returns
Paginator
this paginator
visibleCountNumberdeprecated
Deprecated
The visibleCount will be replaced in version 2 with the padding option.
Gets the number of pages that are shown at once.
Returns
The current visible count for the paginator
currentPageAriaString
Gets the currentPageAria for this paginator
Returns
The currentPageAria for this paginator
currentPageAriacurrentPageAriaStringPaginator
Sets the currentPageAria for this paginator
Arguments
currentPageAriaString
The value to set
Returns
Paginator
this paginator
gotoPageAriagotoPageAriaStringPaginator
Sets the gotoPageAria for this paginator
Arguments
gotoPageAriaString
The value to set
Returns
Paginator
this paginator
gotoPageAriaString
Gets the gotoPageAria for this paginator
Returns
The gotoPageAria for this paginator
nextPageAriaString
Gets the nextPageAria for this paginator
Returns
The nextPageAria for this paginator
nextPageArianextPageAriaStringPaginator
Sets the nextPageAria for this paginator
Arguments
nextPageAriaString
The value to set
Returns
Paginator
this paginator
nextTextnextTextStringPaginator
Sets the nextText for this paginator
Arguments
nextTextString
The value to set
Returns
Paginator
this paginator
nextTextString
Gets the nextText for this paginator
Returns
The nextText for this paginator
pageindexNumberPaginator
Sets the currently selected page. Uses 1 based indexing.
Arguments
indexNumber
The page index to set. This index is 1 based.
Returns
Paginator
this paginator
pageNumber
Gets the currently selected page index.
Returns
The 1-based index of the currently selected page.
pageCountcountNumberPaginator
Sets the total number of pages in the paginator.
Arguments
countNumber
The number of pages to give the paginator.
Returns
Paginator
this paginator
pageCountNumber
Gets the total number of pages in the paginator.
Returns
The current page count for the paginator
paginatorAriaString
Gets the paginatorAria for this paginator
Returns
The paginatorAria for this paginator
paginatorAriapaginatorAriaStringPaginator
Sets the paginatorAria for this paginator
Arguments
paginatorAriaString
The value to set
Returns
Paginator
this paginator
prevPageAriaString
Gets the prevPageAria for this paginator
Returns
The prevPageAria for this paginator
prevPageAriaprevPageAriaStringPaginator
Sets the prevPageAria for this paginator
Arguments
prevPageAriaString
The value to set
Returns
Paginator
this paginator
prevTextprevTextStringPaginator
Sets the prevText for this paginator
Arguments
prevTextString
The value to set
Returns
Paginator
this paginator
prevTextString
Gets the prevText for this paginator
Returns
The prevText for this paginator
updatePageOnSelectBoolean
Gets the updatePageOnSelect for this paginator
Returns
The updatePageOnSelect for this paginator
updatePageOnSelectupdatePageOnSelectBooleanPaginator
Sets the updatePageOnSelect for this paginator
Arguments
updatePageOnSelectBoolean
The value to set
Returns
Paginator
this paginator
Functions
hx.paginatoroptionsObjectSelection
Creates a new Paginator set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing Paginator
Returns
Selection
A selection containing an element with an Paginator initialised on it