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

AanimationSpecifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Assigning any other valid value enables the corresponding animation mode.
AautoEllipsis"Manages the display of ellipsis ("...") within the pagination component. Ellipsis buttons appear when there are too many pages to show at once, serving as visual indicators that more pages are available. These buttons help users quickly navigate to distant pages by indicating page ranges that are not currently displayed."
DdisabledControls whether the pager functionality is active. When enabled, the pager allows navigation through paginated content; when disabled, all content may be displayed at once without pagination.
UunlockKeyRetrieves or assigns the unlockKey, a unique code required to activate and access the product's full features.
LlocaleSets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which set of messages from the messages object will be used for localization or internationalization purposes. Update this property to change the active language displayed to users.
LlocalizeFormatFunctionCallback function associated with the localization module, typically used to handle events or processes such as updating language resources, switching locales, or applying translated content within the application.
MmessagesDefines or retrieves an object containing localized strings used within the widget interface. This property enables the customization of widget text for different languages and regions, allowing for internationalization. It is typically used alongside the locale property to display the appropriate language-specific text based on the user's locale setting.
NnavigationButtonsPositionManages the placement and alignment of navigation buttons within the user interface, determining their exact position (e.g., top, bottom, left, or right) to ensure optimal usability and layout consistency.
PpageIndexRetrieves or updates the index of the currently active page. This value indicates which page is currently being displayed, where the index is zero-based (i.e., the first page has an index of 0). Setting this property changes the current page to the specified index.
PpageIndexSelectorsSpecifies the total number of page index selectors (such as page numbers or navigation dots) displayed in the pagination component, allowing users to navigate between different pages of content.
PpageSizeRetrieves or updates the maximum number of items displayed per page. This determines how many items are visible to the user on a single page of results, commonly used for pagination controls.
PpageSizeSelectorDataSourceSpecifies the data source that populates the options available in the element’s page size selector dropdown menu. This determines which page size choices are presented to the user for selection. Click for more details. Property object's options:
    PpagesCountSpecifies the total count of pages contained within the element, typically used for pagination or indicating how many discrete sections or views are available.
    RreadonlyWhen the element is set to readonly, users can view its content but cannot modify or input any data. Interaction such as typing, editing, or changing the value is disabled, although users may still be able to highlight and copy the text.
    RrightToLeftSets or retrieves a value that specifies whether the element’s layout is aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, by enabling RTL text direction and alignment based on the specified locale.
    SshowFirstLastNavigationButtonsControls the visibility of the 'First' and 'Last' navigation buttons, allowing you to show or hide these buttons in the navigation component.
    SshowNavigationButtonLabelsReplaces the default icon-based navigation buttons with buttons that display descriptive text labels, making navigation options clearer and more accessible to users.
    SshowNavigationInputControls the visibility of the navigation input, specifying whether the navigation input component should be shown or hidden in the user interface.
    SshowPageIndexSelectorsSpecifies whether the page index selectors (such as numbered page buttons or links that allow users to navigate between pages) are visible in the user interface. If set to true, the page index selectors will be displayed; if set to false, they will be hidden.
    SshowPageSizeSelectorSpecifies whether the page size selector control is visible to the user, allowing them to choose the number of items displayed per page.
    SshowPrevNextNavigationButtonsControls the visibility of the 'Previous' and 'Next' navigation buttons, determining whether users can navigate backward or forward through the content.
    SshowSummarySpecifies whether the page summary section is visible to users. If set to true, the summary will be displayed at the top of the page; if false, the summary section will be hidden.
    TthemeSpecifies the theme to be applied to the element. The theme setting controls the overall appearance—including colors, fonts, and visual styles—ensuring a consistent look and feel across the component.
    UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning users will be unable to select the element using the Tab key or other keyboard navigation methods.
    TtotalRecordsGets or sets the total number of records available for pagination, which determines how many pages the Pager will display and manage. This property is particularly useful when the Pager is integrated into a larger component or application that handles data fetching, as it allows the Pager to correctly calculate page counts and navigation based on the overall dataset size.

    Events

    CchangeThis event is triggered whenever the user selects a different item from the list or dropdown menu. It fires only when the selected item changes, allowing your application to respond to user selection updates, such as displaying additional information, updating content, or triggering related actions based on the newly selected item.
    PpageSizeChangedThis event is triggered whenever the page size is modified, such as when a user selects a different number of items to display per page. It allows you to respond to changes in the pagination settings, for example by updating the displayed data or adjusting the layout based on the new page size.

    Methods

    FfirstSelects the first item in the list or array. This operation targets the element at index 0, retrieving or highlighting it as the initially chosen value.
    LlastSelects the last item in the list or array. This operation retrieves the final element from a collection, regardless of its length. If the list is empty, no item will be selected.
    NnavigateToNavigates to a specified item within the collection, allowing direct access based on a unique identifier or index.
    NnextAdvances the pagination control to the next available page, allowing users to view additional content.
    PprevNavigates to the previous page in a paginated list or component by selecting the preceding pager item.

    Properties

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

    Specifies or retrieves the current animation mode. When this property is set to 'none', all animations are disabled. Assigning any other valid value enables the corresponding animation mode.

    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"



    "Manages the display of ellipsis ("...") within the pagination component. Ellipsis buttons appear when there are too many pages to show at once, serving as visual indicators that more pages are available. These buttons help users quickly navigate to distant pages by indicating page ranges that are not currently displayed."

    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

    Controls whether the pager functionality is active. When enabled, the pager allows navigation through paginated content; when disabled, all content may be displayed at once without pagination.

    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;

    unlockKeystring

    Retrieves or assigns the unlockKey, a unique code required to activate and access the product's full features.

    Default value

    ""

    Example

    Set the unlockKey property. 

     <smart-pager unlock-key=''></smart-pager>

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

     const pager = document.querySelector('smart-pager');
     pager.unlockKey = '1111-2222-3333-4444-5555';

    Get the unlockKey property. 

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

    localestring

    Sets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which set of messages from the messages object will be used for localization or internationalization purposes. Update this property to change the active language displayed to users.

    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 function associated with the localization module, typically used to handle events or processes such as updating language resources, switching locales, or applying translated content within the application.

    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

    Defines or retrieves an object containing localized strings used within the widget interface. This property enables the customization of widget text for different languages and regions, allowing for internationalization. It is typically used alongside the locale property to display the appropriate language-specific text based on the user's locale setting.

    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"

    Manages the placement and alignment of navigation buttons within the user interface, determining their exact position (e.g., top, bottom, left, or right) to ensure optimal usability and layout consistency.

    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

    Retrieves or updates the index of the currently active page. This value indicates which page is currently being displayed, where the index is zero-based (i.e., the first page has an index of 0). Setting this property changes the current page to the specified 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

    Specifies the total number of page index selectors (such as page numbers or navigation dots) displayed in the pagination component, allowing users to navigate between different pages of content.

    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

    Retrieves or updates the maximum number of items displayed per page. This determines how many items are visible to the user on a single page of results, commonly used for pagination controls.

    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[]

    Specifies the data source that populates the options available in the element’s page size selector dropdown menu. This determines which page size choices are presented to the user for selection.

    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

    Specifies the total count of pages contained within the element, typically used for pagination or indicating how many discrete sections or views are available.

    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

    When the element is set to readonly, users can view its content but cannot modify or input any data. Interaction such as typing, editing, or changing the value is disabled, although users may still be able to highlight and copy the text.

    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 retrieves a value that specifies whether the element’s layout is aligned to support right-to-left (RTL) languages, such as Arabic or Hebrew, by enabling RTL text direction and alignment based on the specified locale.

    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

    Controls the visibility of the 'First' and 'Last' navigation buttons, allowing you to show or hide these buttons in the navigation component.

    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

    Replaces the default icon-based navigation buttons with buttons that display descriptive text labels, making navigation options clearer and more accessible to users.

    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

    Controls the visibility of the navigation input, specifying whether the navigation input component should be shown or hidden in the user interface.

    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

    Specifies whether the page index selectors (such as numbered page buttons or links that allow users to navigate between pages) are visible in the user interface. If set to true, the page index selectors will be displayed; if set to false, they will be hidden.

    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

    Specifies whether the page size selector control is visible to the user, allowing them to choose the number of items displayed per page.

    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

    Controls the visibility of the 'Previous' and 'Next' navigation buttons, determining whether users can navigate backward or forward through the content.

    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

    Specifies whether the page summary section is visible to users. If set to true, the summary will be displayed at the top of the page; if false, the summary section will be hidden.

    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

    Specifies the theme to be applied to the element. The theme setting controls the overall appearance—including colors, fonts, and visual styles—ensuring a consistent look and feel across the component.

    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

    When set to true, this property prevents the element from receiving keyboard focus, meaning users will be unable to select the element using the Tab key or other keyboard navigation methods.

    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 or sets the total number of records available for pagination, which determines how many pages the Pager will display and manage. This property is particularly useful when the Pager is integrated into a larger component or application that handles data fetching, as it allows the Pager to correctly calculate page counts and navigation based on the overall dataset size.

    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 whenever the user selects a different item from the list or dropdown menu. It fires only when the selected item changes, allowing your application to respond to user selection updates, such as displaying additional information, updating content, or triggering related actions based on the newly selected 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 whenever the page size is modified, such as when a user selects a different number of items to display per page. It allows you to respond to changes in the pagination settings, for example by updating the displayed data or adjusting the layout based on the new page size.

    • 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 the first item in the list or array. This operation targets the element at index 0, retrieving or highlighting it as the initially chosen value.


    Invoke the first method.

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

    last(): void

    Selects the last item in the list or array. This operation retrieves the final element from a collection, regardless of its length. If the list is empty, no item will be selected.


    Invoke the last method.

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

    navigateTo( pageIndex: any): void

    Navigates to a specified item within the collection, allowing direct access based on a unique identifier or index.

    Arguments

    pageIndexany


    Invoke the navigateTo method.

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

    next(): void

    Advances the pagination control to the next available page, allowing users to view additional content.


    Invoke the next method.

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

    prev(): void

    Navigates to the previous page in a paginated list or component by selecting the preceding 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.