Pager JAVASCRIPT UI Component API

Pager Javascript API

Class

Pager

Pager

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

Selector

smart-pager

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoEllipsisHandles pager's elipsis. Ellipsis buttons are displayed as indicators and additional help to navigate between pages.
DdisabledEnables or disables the pager.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback, related to localization module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
NnavigationButtonsPositionHandles the position of the navigation buttons.
PpageIndexGets/sets current page index.
PpageIndexSelectorsDefines the number of page index selectors.
PpageSizeGets/sets total number of items displayed on page.
PpageSizeSelectorDataSourceDefines the data source of the element's page size selector drop down. Click for more details. Property object's options:
    PpagesCountThe number of pages in the element.
    RreadonlyIf the element is readonly, users cannot interact with it.
    RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
    SshowFirstLastNavigationButtonsControlls displaying of the 'first' and 'last' navigation buttons.
    SshowNavigationButtonLabelsDisplays text content in navigation buttons instead default icons.
    SshowNavigationInputDetermines whether the navigation input is displayed.
    SshowPageIndexSelectorsDetermines whether the page index selectors are displayed.
    SshowPageSizeSelectorDetermines whether the page size selector is displayed.
    SshowPrevNextNavigationButtonsControlls displaying of the 'previous' and 'next' navigation buttons.
    SshowSummaryDetermines whether the page summary is displayed.
    TthemeDetermines the theme. Theme defines the look of the element
    UunfocusableIf is set to true, the element cannot be focused.
    TtotalRecordsGets/sets total number of records whose pagination the Pager controls. Useful when the Pager is part of a more complex element or application.

    Events

    CchangeThis event is triggered when user selects a new item.
    PpageSizeChangedThis event is triggered when page size is changed.

    Methods

    FfirstSelects first item.
    LlastSelects last item.
    NnavigateToNavigates to particular item.
    NnextSelects next pager item.
    PprevSelects previous pager item.

    Properties

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

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

    Allowed Values

    • "none" - animation is disabled
    • "simple" - ripple animation is disabled
    • "advanced" - all animations are enabled

    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;

    pageIndexSelectorsnumber

    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
    Try a demo showcasing the rightToLeft property.

    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.