Paginator

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

Change Log

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

Number

The current visible count for the paginator

currentPageAriacurrentPageAriaStringPaginator

Sets the currentPageAria for this paginator

Arguments

currentPageAriaString

The value to set

Returns

Paginator

this paginator

currentPageAriaString

Gets the currentPageAria for this paginator

Returns

String

The currentPageAria for 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

String

The gotoPageAria for this paginator

nextPageArianextPageAriaStringPaginator

Sets the nextPageAria for this paginator

Arguments

nextPageAriaString

The value to set

Returns

Paginator

this paginator

nextPageAriaString

Gets the nextPageAria for this paginator

Returns

String

The nextPageAria for 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

String

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

Number

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

Number

The current page count for the paginator

paginatorAriapaginatorAriaStringPaginator

Sets the paginatorAria for this paginator

Arguments

paginatorAriaString

The value to set

Returns

Paginator

this paginator

paginatorAriaString

Gets the paginatorAria for this paginator

Returns

String

The paginatorAria for this paginator

prevPageAriaprevPageAriaStringPaginator

Sets the prevPageAria for this paginator

Arguments

prevPageAriaString

The value to set

Returns

Paginator

this paginator

prevPageAriaString

Gets the prevPageAria for this paginator

Returns

String

The prevPageAria for 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

String

The prevText for this paginator

updatePageOnSelectupdatePageOnSelectBooleanPaginator

Sets the updatePageOnSelect for this paginator

Arguments

updatePageOnSelectBoolean

The value to set

Returns

Paginator

this paginator

updatePageOnSelectBoolean

Gets the updatePageOnSelect for this paginator

Returns

Boolean

The updatePageOnSelect for 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