Pager JAVASCRIPT UI Component API

Pager Javascript API

Class

Pager

Pagination component that is used to navigate between a set of results.

Selector

smart-pager

Properties

Events

Methods

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Default value

"advanced"

Example

Set the animation property.

 <smart-pager animation='none'></smart-pager>

Set the animation property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.animation = 'simple';

Get the animation property.

 const pager = document.querySelector('smart-pager');
 let animation = pager.animation;

autoEllipsis"none" | "before" | "after" | "both"

Handles pager's elipsis. Ellipsis buttons are displayed as indicators and additional help to navigate between pages.

Default value

"none"

Example

Set the autoEllipsis property.

 <smart-pager auto-ellipsis='before'></smart-pager>

Set the autoEllipsis property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.autoEllipsis = 'after';

Get the autoEllipsis property.

 const pager = document.querySelector('smart-pager');
 let autoEllipsis = pager.autoEllipsis;

disabledboolean

Enables or disables the pager.

Default value

false

Example

Set the disabled property.

 <smart-pager disabled></smart-pager>

Set the disabled property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.disabled = false;

Get the disabled property.

 const pager = document.querySelector('smart-pager');
 let disabled = pager.disabled;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-pager locale='de'></smart-pager>

Set the locale property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.locale = 'fr';

Get the locale property.

 const pager = document.querySelector('smart-pager');
 let locale = pager.locale;

localizeFormatFunctionfunction | null

Callback, related to localization module.

Example

Set the localizeFormatFunction property.

 <smart-pager localize-format-function='function(){return '...'}'></smart-pager>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property.

 const pager = document.querySelector('smart-pager');
 let localizeFormatFunction = pager.localizeFormatFunction;

messagesobject

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": ""

}

Example

Set the messages property.

 <smart-pager messages='{"de":{"propertyUnknownType":"'{{name}}' Eigenschaft ist mit undefined 'Typ'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Tatsachlicher Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert  '{{name}}'! Tatsachlicher Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","firstButton":"Zuerst","lastButton":"Zuletzt","previousButton":"Bisherige","nextButton":"Nachster","navigateToLabel":"Gehe zu:","pageSizeLabel":"Show:","navigateToInputPlaceholder":"","ellipsis":"...","summaryString":"von","summaryPrefix":"von","summarySuffix":""}}'></smart-pager>

Set the messages property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.messages = {"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":""}};

Get the messages property.

 const pager = document.querySelector('smart-pager');
 let messages = pager.messages;

navigationButtonsPosition"near" | "far" | "both"

Handles the position of the navigation buttons.

Default value

"near"

Example

Set the navigationButtonsPosition property.

 <smart-pager navigation-buttons-position='far'></smart-pager>

Set the navigationButtonsPosition property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.navigationButtonsPosition = 'both';

Get the navigationButtonsPosition property.

 const pager = document.querySelector('smart-pager');
 let navigationButtonsPosition = pager.navigationButtonsPosition;

pageIndexnumber

Gets/sets current page index.

Default value

0

Example

Set the pageIndex property.

 <smart-pager page-index='5'></smart-pager>

Set the pageIndex property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.pageIndex = 10;

Get the pageIndex property.

 const pager = document.querySelector('smart-pager');
 let pageIndex = pager.pageIndex;

pageIndexSelectorsany

Defines the number of page index selectors.

Default value

0

Example

Set the pageIndexSelectors property.

 <smart-pager page-index-selectors='5'></smart-pager>

Set the pageIndexSelectors property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.pageIndexSelectors = 10;

Get the pageIndexSelectors property.

 const pager = document.querySelector('smart-pager');
 let pageIndexSelectors = pager.pageIndexSelectors;

pageSizenumber

Gets/sets total number of items displayed on page.

Default value

10

Example

Set the pageSize property.

 <smart-pager page-size='5'></smart-pager>

Set the pageSize property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.pageSize = 10;

Get the pageSize property.

 const pager = document.querySelector('smart-pager');
 let pageSize = pager.pageSize;

pageSizeSelectorDataSourcenumber[]

Defines the data source of the element's page size selector drop down.

Example

Set the pageSizeSelectorDataSource property.

 <smart-pager page-size-selector-data-source='[5, 10, 15]'></smart-pager>

Set the pageSizeSelectorDataSource property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.pageSizeSelectorDataSource = [50, 100, 150];

Get the pageSizeSelectorDataSource property.

 const pager = document.querySelector('smart-pager');
 let pageSizeSelectorDataSource = pager.pageSizeSelectorDataSource;

pagesCountnumber

The number of pages in the element.

Default value

100

Example

Set the pagesCount property.

 <smart-pager pages-count='5'></smart-pager>

Set the pagesCount property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.pagesCount = 10;

Get the pagesCount property.

 const pager = document.querySelector('smart-pager');
 let pagesCount = pager.pagesCount;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

 <smart-pager readonly></smart-pager>

Set the readonly property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.readonly = true;

Get the readonly property.

 const pager = document.querySelector('smart-pager');
 let readonly = pager.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Example

Set the rightToLeft property.

 <smart-pager right-to-left></smart-pager>

Set the rightToLeft property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.rightToLeft = true;

Get the rightToLeft property.

 const pager = document.querySelector('smart-pager');
 let rightToLeft = pager.rightToLeft;

showFirstLastNavigationButtonsboolean

Controlls displaying of the 'first' and 'last' navigation buttons.

Default value

false

Example

Set the showFirstLastNavigationButtons property.

 <smart-pager show-first-last-navigation-buttons></smart-pager>

Set the showFirstLastNavigationButtons property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showFirstLastNavigationButtons = false;

Get the showFirstLastNavigationButtons property.

 const pager = document.querySelector('smart-pager');
 let showFirstLastNavigationButtons = pager.showFirstLastNavigationButtons;

showNavigationButtonLabelsboolean

Displays text content in navigation buttons instead default icons.

Default value

false

Example

Set the showNavigationButtonLabels property.

 <smart-pager show-navigation-button-labels></smart-pager>

Set the showNavigationButtonLabels property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showNavigationButtonLabels = false;

Get the showNavigationButtonLabels property.

 const pager = document.querySelector('smart-pager');
 let showNavigationButtonLabels = pager.showNavigationButtonLabels;

showNavigationInputboolean

Determines whether the navigation input is displayed.

Default value

false

Example

Set the showNavigationInput property.

 <smart-pager show-navigation-input></smart-pager>

Set the showNavigationInput property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showNavigationInput = false;

Get the showNavigationInput property.

 const pager = document.querySelector('smart-pager');
 let showNavigationInput = pager.showNavigationInput;

showPageIndexSelectorsboolean

Determines whether the page index selectors are displayed.

Default value

false

Example

Set the showPageIndexSelectors property.

 <smart-pager show-page-index-selectors></smart-pager>

Set the showPageIndexSelectors property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showPageIndexSelectors = false;

Get the showPageIndexSelectors property.

 const pager = document.querySelector('smart-pager');
 let showPageIndexSelectors = pager.showPageIndexSelectors;

showPageSizeSelectorboolean

Determines whether the page size selector is displayed.

Default value

false

Example

Set the showPageSizeSelector property.

 <smart-pager show-page-size-selector></smart-pager>

Set the showPageSizeSelector property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showPageSizeSelector = false;

Get the showPageSizeSelector property.

 const pager = document.querySelector('smart-pager');
 let showPageSizeSelector = pager.showPageSizeSelector;

showPrevNextNavigationButtonsboolean

Controlls displaying of the 'previous' and 'next' navigation buttons.

Default value

false

Example

Set the showPrevNextNavigationButtons property.

 <smart-pager show-prev-next-navigation-buttons></smart-pager>

Set the showPrevNextNavigationButtons property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showPrevNextNavigationButtons = false;

Get the showPrevNextNavigationButtons property.

 const pager = document.querySelector('smart-pager');
 let showPrevNextNavigationButtons = pager.showPrevNextNavigationButtons;

showSummaryboolean

Determines whether the page summary is displayed.

Default value

false

Example

Set the showSummary property.

 <smart-pager show-summary></smart-pager>

Set the showSummary property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.showSummary = false;

Get the showSummary property.

 const pager = document.querySelector('smart-pager');
 let showSummary = pager.showSummary;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property.

 <smart-pager theme='blue'></smart-pager>

Set the theme property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.theme = 'red';

Get the theme property.

 const pager = document.querySelector('smart-pager');
 let theme = pager.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-pager unfocusable></smart-pager>

Set the unfocusable property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.unfocusable = false;

Get the unfocusable property.

 const pager = document.querySelector('smart-pager');
 let unfocusable = pager.unfocusable;

totalRecordsnumber

Gets/sets total number of records whose pagination the Pager controls. Useful when the Pager is part of a more complex element or application.

Example

Set the totalRecords property.

 <smart-pager total-records='1000'></smart-pager>

Set the totalRecords property by using the HTML Element's instance.

 const pager = document.querySelector('smart-pager');
 pager.totalRecords = 39;

Get the totalRecords property.

 const pager = document.querySelector('smart-pager');
 let totalRecords = pager.totalRecords;

Events

changeCustomEvent

This event is triggered when user selects a new item.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const pager = document.querySelector('smart-pager');
pager.addEventListener('change', function (event) {
	// event handling code goes here.
})

pageSizeChangedCustomEvent

This event is triggered when page size is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onPageSizeChanged

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of pageSizeChanged event.

const pager = document.querySelector('smart-pager');
pager.addEventListener('pageSizeChanged', function (event) {
	// event handling code goes here.
})

Methods

first(): void

Selects first item.


Invoke the first method.

const pager = document.querySelector('smart-pager');
pager.first();

last(): void

Selects last item.


Invoke the last method.

const pager = document.querySelector('smart-pager');
pager.last();

navigateTo( pageIndex: any): void

Navigates to particular item.

Arguments

pageIndexany


Invoke the navigateTo method.

const pager = document.querySelector('smart-pager');
pager.navigateTo(1);

next(): void

Selects next pager item.


Invoke the next method.

const pager = document.querySelector('smart-pager');
pager.next();

prev(): void

Selects previous pager item.


Invoke the prev method.

const pager = document.querySelector('smart-pager');
pager.prev();

CSS Variables

--smart-pager-default-widthvar()

Default value

"var(--smart-bar-width)"

default pager width

--smart-pager-default-heightvar()

Default value

"var(--smart-bar-height)"

default pager height

--smart-pager-button-widthvar()

Default value

"'auto'"

default pager button width

--smart-pager-button-heightvar()

Default value

"32px"

default pager button height

--smart-pager-page-size-selector-widthvar()

Default value

"60px"

Default page size selector width.

--smart-pager-page-index-selector-widthvar()

Default value

"32px"

default pager item width

--smart-pager-page-index-selector-heightvar()

Default value

"32px"

default pager item height

--smart-pager-page-index-ellipsis-selector-widthvar()

Default value

"32px"

default pager ellipsis width

--smart-pager-page-index-ellipsis-selector-heightvar()

Default value

"32px"

default pager ellipsis width

--smart-pager-page-index-selector-horizontal-offsetvar()

Default value

"8px"

default pager ellipsis width

--smart-pager-paddingvar()

Default value

"2px"

Default padding.

--smart-pager-input-widthvar()

Default value

"50px"

Default width of the pager input.