Pager
Pagination component that is used to navigate between a set of results.
Selector
smart-pager
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
autoEllipsisPagerAutoEllipsis
Handles pager's elipsis. Ellipsis buttons are displayed as indicators and additional help to navigate between pages.
Default valuenone
disabledboolean
Enables or disables the pager.
Default valuefalse
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback, related to localization module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"firstButton": "First",
"lastButton": "Last",
"previousButton": "Previous",
"nextButton": "Next",
"navigateToLabel": "Go to:",
"pageSizeLabel": "Show:",
"navigateToInputPlaceholder": "",
"ellipsis": "...",
"summaryString": "of",
"summaryPrefix": "of",
"summarySuffix": ""
}
navigationButtonsPositionLayoutPosition
Handles the position of the navigation buttons.
Default valuenear
pageIndexnumber
Gets/sets current page index.
Default value0
pageIndexSelectorsany
Defines the number of page index selectors.
Default value0
pageSizenumber
Gets/sets total number of items displayed on page.
Default value10
pageSizeSelectorDataSourcenumber[]
Defines the data source of the element's page size selector drop down.
pagesCountnumber
The number of pages in the element.
Default value100
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
showFirstLastNavigationButtonsboolean
Controlls displaying of the 'first' and 'last' navigation buttons.
Default valuefalse
showNavigationButtonLabelsboolean
Displays text content in navigation buttons instead default icons.
Default valuefalse
showNavigationInputboolean
Determines whether the navigation input is displayed.
Default valuefalse
showPageIndexSelectorsboolean
Determines whether the page index selectors are displayed.
Default valuefalse
showPageSizeSelectorboolean
Determines whether the page size selector is displayed.
Default valuefalse
showPrevNextNavigationButtonsboolean
Controlls displaying of the 'previous' and 'next' navigation buttons.
Default valuefalse
showSummaryboolean
Determines whether the page summary is displayed.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
onchange((this: Window, ev: Event) => any) | null
This event is triggered when user selects a new item.
Arguments
evEvent
onpagesizechanged((this: Window, ev: Event) => any) | null
This event is triggered when page size is changed.
Arguments
evEvent
Methods
first(): void
Selects first item.
last(): void
Selects last item.
navigateTo( pageIndex: any): void
Navigates to particular item.
Arguments
pageIndexany
next(): void
Selects next pager item.
prev(): void
Selects previous pager item.