10.25 Pagination

Description: This attribute is used to apply pagination to list/table.

Components to accept the input: Switch


Description of uxextensibility270.png follows
Description of the illustration uxextensibility270.png

When user enables the switch, it will display an input text and accordion as shown in the image below.


Description of uxextensibility271.png follows
Description of the illustration uxextensibility271.png

  1. Page Size: This is used to specify the page size i.e. how many records should be visible to the user on the first page.

    For example, user has given page size as 3, only first three records will be visible to the user as shown in the image below.


    Description of uxextensibility272.png follows
    Description of the illustration uxextensibility272.png

  2. Page Options: When user expands this accordion, it shows multiple page options as shown in the image below.
    Description of uxextensibility274.png follows
    Description of the illustration uxextensibility274.png

  3. Layout: This option is used to specify how the paging navigation controls should be displayed.
    Description of uxextensibility274.png follows
    Description of the illustration uxextensibility274.png

    It has following six options:
    1. All: Display all controls
      Description of uxextensibility275.png follows
      Description of the illustration uxextensibility275.png

    2. Auto: The Paging Control decides which controls to display.
      Description of uxextensibility276.png follows
      Description of the illustration uxextensibility276.png

    3. Input: Display the page input control
      Description of uxextensibility277.png follows
      Description of the illustration uxextensibility277.png

    4. Navigation: Display the navigation arrows
      Description of uxextensibility278.png follows
      Description of the illustration uxextensibility278.png

    5. Pages: Display the page links
      Description of uxextensibility279.png follows
      Description of the illustration uxextensibility279.png

    6. RangeText: Display the page range text control
      Description of uxextensibility280.png follows
      Description of the illustration uxextensibility280.png

  4. Maximum PageLinks: This option is used to give the maximum number of page links to display.
    Description of uxextensibility281.png follows
    Description of the illustration uxextensibility281.png

    An ellipsis '...' will be displayed for pages, which exceed the maximum number as shown in the image below. maxPageLinks must be greater than 4.


    Description of uxextensibility282.png follows
    Description of the illustration uxextensibility282.png

  5. Orientation: This option is used to give the orientation of the page links.
    Description of uxextensibility283.png follows
    Description of the illustration uxextensibility283.png

    It has following options:
    1. Horizontal: This option is used to align the page links horizontally.
      Description of uxextensibility284.png follows
      Description of the illustration uxextensibility284.png

    2. Vertical: This option is used to align the page links vertically.

Example: User wants a pagination with following options.

Page size: 4

Layout : ‘All’

Max Page Links: “5”

Orientation: “Horizontal”


Description of uxextensibility285.png follows
Description of the illustration uxextensibility285.png

Usage: Enter all the options as shown in the image below.


Description of uxextensibility286.png follows
Description of the illustration uxextensibility286.png

Parent topic: Available Attributes