ux-pagination

ux-pagination Documentation

Documentation about styling pagination can be found at Foundataion's pagination page

When using the ux-pagination component in data driven mode it greatly simplifies the pagination process. The component only needs to know the current page (via currentPage), the total number of pages to display (via totalPages) and how many pages to display (via displayPages which defaults to 10). When the user clicks on a page the event newPage will be fired with the new page number, all the widget/component using this pagination needs to do is listen for the event and change its data as appropriate.


Use Cases Manifest Data driven use caseData driven use case with minimum data possible
    {{#events.uxPagination_63}}
  • {{this}}
  • {{/}}

	{
    "currentPage": 10,
    "totalPages": 15,
    "displayPages": 10,
    "nextText": "»",
    "prevText": "«",
    "skipText": "…"
}
    {{#events.uxPagination_64}}
  • {{this}}
  • {{/}}

	{
    "totalPages": 15
}
Semantic Event Mapping
onclick - Event to fire when component is clicked


Semantic Data Model
currentPage - The currently selected page (Default 1)
totalPages - The total number of pages accessible
displayPages - The number of pages to display (Default 10)
nextText - The text for the next page (Default »)
prevText - The text for the previous page (Default «)
skipText - The text for the skipped pages (Default …)
isCollapsed - A function that can determine if a particulular page should be part of a skipped group of pages