Pager - Documentation | www.HtmlElements.com

Overview

Smart.Pager represents an element, which is used for navigation between multiple pages, by clicking on its components.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.pager.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class
    • smart.button.js - the JS file containing the element definition
    • smart.scrollbar.js - the JS file containing the scrollbar's definition, used in the listbox
    • smart.listbox.js - the JS file containing the listbox's definition, used in the dropdownlist
    • smart.dropdownlist.js - the JS file containing the dropdownlist's definition
    • smart.pager.js - the JS file containing the element definition

    Usage

    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #pager is a smart-pager tag.

      import {smartPager} from "../../source/modules/smart.pager.js";
      
      Smart('#pager', class {
      get properties() {
      	return {
      		showSummary: true
      	}
      }
      });
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      
      }
      
      Using the Smart function is optional. You can use const pager = document.querySelector("#pager"); and set the properties like that:
      const pager = document.querySelector("#pager");
      
      pager.showSummary = true;
      

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #pager is a DIV tag.

      import {smartPager} from "../../source/modules/smart.pager.js";
      
      document.readyState === 'complete' ? init() : window.onload = init;
      
      function init() { 
      const pager = new smartPager('#pager', {
         		showSummary: true
      });
      }
      
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html lang="en">
      <head>
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <script type="text/javascript" src="../../source/smart.element.js"></script>
       <script type="text/javascript" src="../../source/smart.button.js"></script>
       <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
       <script type="text/javascript" src="../../source/smart.listbox.js"></script>
       <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script>
       <script type="text/javascript" src="../../source/smart.pager.js"></script>
      </head>
      <body>
          <smart-pager show-prev-next-navigation-buttons show-first-last-navigation-buttons show-page-index-selectors pages-count="5" page-index-selectors="5" show-summary></smart-pager>
      </body>
      </html>
      

      Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const pager = document.createElement('smart-multiline-text-box');

Append it to the DOM:
document.body.appendChild(pager);

Remove it from the DOM:
pager.parentNode.removeChild(pager);

Set a property:
pager.propertyName = propertyValue;

Get a property value:
const propertyValue = pager.propertyName;

Invoke a method:
pager.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

pager.addEventListener(eventName, eventHandler);

Remove Event Listener:
pager.removeEventListener(eventName, eventHandler, true);

Demo

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Appearance

The total number of items and the number of visualized items are controlled by the following properties :

  • pagesCount - total number of items.
  • pageIndexSelectors - the number of items displayed on page.

The pager can have multiple navigation buttons, controlled by the following properties:

  • showFirstLastNavigationButtons - buttons for navigation to the firs and the last item.
  • showPrevNextNavigationButtons - buttons for navigation to the previous and the next item.
  • autoEllipsis - ellipsis buttons are displayed as indicators and additional help to navigate between pages. Available options are:
    • none - ellipsis are hidden.
    • before - ellipsis are shown as navigation to previous page only.
    • after - ellipsis are shown as navigation to next page only.
    • both - ellipsis are shown as navigation to both previous and next pages.
<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
 <script type="text/javascript" src="../../source/smart.listbox.js"></script>
 <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script>
 <script type="text/javascript" src="../../source/smart.pager.js"></script>
</head>
<body>
    <smart-pager show-prev-next-navigation-buttons show-first-last-navigation-buttons show-page-index-selectors pages-count="5" page-index-selectors="5" show-summary></smart-pager>
</body>
</html>

Demo

Additional options to control the element are :

  • showSummary - controls the visibility of segment that displays range of visible items.
  • showPageSizeSelector - Determines whether the page size selector is displayed.
  • showNavigationInput - Determines whether the navigation input is displayed.
 <smart-pager show-page-size-selector show-navigation-input show-prev-next-navigation-buttons pages-count="10" show-summary></smart-pager>

Demo

Instead arrows, navigation buttons can have text labels. To achieve this, showNavigationButtonLabels property must be set to true.
An element with shown text labels, could be localized. The user can define the text, wich is shown in for particular language. Setting of messages defines the text values of each button. Locale defines the language used at the moment.

 <smart-pager show-navigation-button-labels locale="fr" show-prev-next-navigation-buttons show-first-last-navigation-buttons how-page-index-selectors pages-count="300" page-index-selectors="10" ></smart-pager>

Demo

Methods

The element offers the following methods:

  • first - Selects first item.
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.first();
         }
     </script>
    
  • last - Selects last item.
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.last();
         }
     </script>
    
  • navigateTo - Navigates to an item with particular index.
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.navigateTo(5);
         }
     </script>
    
  • next - Navigates to the next item(if exists such an item).
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.next();
         }
     </script>
    
  • prev - Navigates to the previous item(if exists such an item).
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.prev();
         }
     </script>
    

Keyboard Support

User can navigate between the items via arrow keys. Arrow Up, Arrow Right and Page Up increase the page index, Arrow Down, Arrow Left and Page Down decrease it. Home moves the selection to the first item, End to the last.