Pager — Smart UI JavaScript API

Pager — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Pager - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-pager id="demo-pager"></smart-pager>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.pager.js';

    const el = document.getElementById('demo-pager');
    if (el) {

      el.pageIndex = 0;
      el.pageSize = 10;
      el.totalRecords = 120;

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: Pager   Framework: JavaScript   Selector: smart-pager

API counts: 25 properties, 5 methods, 2 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: first(), last(), navigateTo(), next(), prev()

Common events: change, pageSizeChanged

Module hint: smart-webcomponents/source/modules/smart.pager.js

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

Class

Pager

Pager

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

Selector

smart-pager

Quick picks

changedisabled

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.
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.
PpagesCountSpecifies the total count of pages contained within the element, typically used for pagination or indicating how many discrete sections or views are available.
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:
    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.
    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.
    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.
    UunlockKeyRetrieves or assigns the unlockKey, a unique code required to activate and access the product's full features.

    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

    animationSpecifies 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."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"

    Examples

    Markup and runtime examples for animation:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

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

    Examples

    Markup and runtime examples for autoEllipsis:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    disabledControls 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.boolean

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

    Examples

    Markup and runtime examples for disabled:

    HTML attribute:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    localeSets 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.string

    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"

    Examples

    Markup and runtime examples for locale:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    localizeFormatFunctionCallback 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.function | 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.

    Examples

    Markup and runtime examples for localizeFormatFunction:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    messagesDefines 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.object

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

    }

    Try a demo showcasing the messages property.

    Examples

    Markup and runtime examples for messages:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    navigationButtonsPositionManages 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."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"

    Examples

    Markup and runtime examples for navigationButtonsPosition:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    pageIndexRetrieves 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.number

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

    Examples

    Markup and runtime examples for pageIndex:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    pageIndexSelectorsSpecifies 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.number

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

    Examples

    Markup and runtime examples for pageIndexSelectors:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

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

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

    Examples

    Markup and runtime examples for pagesCount:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    pageSizeRetrieves 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.number

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

    Examples

    Markup and runtime examples for pageSize:

    HTML:

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

    Vanilla JS — prefer #id if multiple widgets exist on the page:

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

    Read the current value:

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

    pageSizeSelectorDataSourceSpecifies 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:
      number[]

      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.

      Try a demo showcasing the pageSizeSelectorDataSource property.

      Examples

      Markup and runtime examples for pageSizeSelectorDataSource:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      readonlyWhen 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.boolean

      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

      Examples

      Markup and runtime examples for readonly:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      rightToLeftSets 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.boolean

      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.

      Examples

      Markup and runtime examples for rightToLeft:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      Examples

      Markup and runtime examples for showFirstLastNavigationButtons:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      Examples

      Markup and runtime examples for showNavigationButtonLabels:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

      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

      Examples

      Markup and runtime examples for showNavigationInput:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      showPageIndexSelectorsSpecifies 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.boolean

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

      Examples

      Markup and runtime examples for showPageIndexSelectors:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

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

      Examples

      Markup and runtime examples for showPageSizeSelector:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

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

      Default value

      false

      Examples

      Markup and runtime examples for showPrevNextNavigationButtons:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      showSummarySpecifies 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.boolean

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

      Examples

      Markup and runtime examples for showSummary:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      themeSpecifies 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.string

      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

      ""

      Examples

      Markup and runtime examples for theme:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      totalRecordsGets 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.number

      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.

      Try a demo showcasing the totalRecords property.

      Examples

      Markup and runtime examples for totalRecords:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      unfocusableWhen 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.boolean

      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

      Examples

      Markup and runtime examples for unfocusable:

      HTML attribute:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

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

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

      Default value

      ""

      Examples

      Markup and runtime examples for unlockKey:

      HTML:

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

      Vanilla JS — prefer #id if multiple widgets exist on the page:

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

      Read the current value:

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

      Events

      changeThis 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.CustomEvent

      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.

      Try a demo showcasing the change event.

      Examples

      Listen for change using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      pageSizeChangedThis 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.CustomEvent

      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.

      Try a demo showcasing the pageSizeChanged event.

      Examples

      Listen for pageSizeChanged using the pattern that matches your stack.

      DOM — listen on the custom element (use a specific selector if the page has more than one):

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

      Methods

      first(): voidSelects 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-pager, if you host multiple widgets):

      document.querySelector('smart-pager')?.first();

      last(): voidSelects 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.

      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.

      On the custom element in the DOM (narrow the selector, e.g. to #my-pager, if you host multiple widgets):

      document.querySelector('smart-pager')?.last();

      navigateTo( pageIndex: any): voidNavigates to a specified item within the collection, allowing direct access based on a unique identifier or index.

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

      Arguments

      pageIndexany

      On the custom element in the DOM (narrow the selector, e.g. to #my-pager, if you host multiple widgets):

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

      next(): voidAdvances the pagination control to the next available page, allowing users to view additional content.

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

      On the custom element in the DOM (narrow the selector, e.g. to #my-pager, if you host multiple widgets):

      document.querySelector('smart-pager')?.next();

      Try a demo showcasing the next method.

      prev(): voidNavigates to the previous page in a paginated list or component by selecting the preceding pager item.

      Navigates to the previous page in a paginated list or component by selecting the preceding pager item.

      On the custom element in the DOM (narrow the selector, e.g. to #my-pager, if you host multiple widgets):

      document.querySelector('smart-pager')?.prev();

      Try a demo showcasing the prev method.

      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.