Overview

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

To initialize Smart.Pager, the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • 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

The following code adds a pager with 3 items to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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 items="3"></smart-pager> </body> </html>

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 :

  • items – total number of items.
  • itemsPerPage – the number of items displayed on page.
<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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 items="50" items-per-page="5"></smart-pager> </body> </html>

Demo

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

  • firstLastButtons – buttons for navigation to the firs and the last item.
  • prevNextButtons – buttons for navigation to the previous and the next item.
  • prevNextPageButtons – buttons for navigation to the previous and the next page.
  • ellipsis – Ellipsis buttons are displayed as indicators and additional help to navigate between pages.
 <smart-pager items="50" first-last-buttons prev-next-buttons prev-next-page-buttons ellipsis></smart-pager>

Demo

showRange controlls the visibility of segment that displays range of visible items.

 <smart-pager items="50" show-range></smart-pager>

Demo

When the user wants to display only controlls without item containers, could be used hideItems property.

 <smart-pager items="50" prev-next-buttons show-range hide-items></smart-pager>

Demo

Behavior

Smart.Pager could be disabled via disabled property.
Pager’s items could be disabled separatelly by setting of disabledItems array:

 <smart-pager items="3" disabled-items="[0,1]"></smart-pager>
                

Demo

The element offers the following methods:

  • nextItem – navigates to the next item(if exists such an item).
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.nextItem();
         }
     </script>
    
  • prevItem – navigates to the previous item(if exists such an item).
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.nextItem();
         }
     </script>
    
  • nextPage – navigates to the next page(if exists such a page).
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.nextItem();
         }
     </script>
    
  • prevPage – navigates to the previous page(if exists such a page).
     <script>
         window.onload = function () {
             var pager = document.querySelector('smart-pager');
             pager.prevPage();
         }
     </script>
    

Keyboard Support

User can navigate between the items via arrow keys. Arrow Up and Arrow Right increased the number of the selection, Arrow Down and Arrow Left decrease it. Home moves the selection to the first item, End to the last. With Page Up and Page Down could be navigated between the pages.