Jump to content

Guides

ips.ui.pagination

Description

The Pagination widget wraps pagination HTML in order to emit events that controllers can use to provide interactivity. It also adds some basic usability to the page jump menu. It does not handle fetching pages itself. Instead, the events it emits are used by other controllers to load new content.

Note: The Pagination widget will generally be implemented by the PHP classes used to build tables, lists etc. Consult the relevant backend documentation for information on automatically supporting pagination in those classes.

 

Options

ajaxEnabled
(Boolean; optional; default true)

Determines whether events are triggered by the pagination when the user clicks a page number. This option can be changed on the fly by changing the value of the data-ipsPagination-ajaxEnabled attribute.

 

pages
(Number; required)

Specifies the highest possible page number for this set of results. Used to display an error to the user if they try and jump to a page number that does not exist.

 

perPage
(Number; optional; default 25)

Specifies the number of results that are shown on each page.

 

pageParam
(String; optional; default 'page')

Specifies the parameter to be used to represent the page number to load. Passed in emitted events for use by controllers.

 

Events

paginationClicked

Triggered when the user clicks a page number or uses the page jump menu.

Event data:

  • href
    URL of the page that was clicked
  • hrefTitle
    title attribute of the page link that was clicked
  • paginationElem
    Reference to the pagination wrapper element
  • pageElem
    Reference to the page link element that was clicked
  • perPage
    The perPage value specified in the widget options
  • pageParam
    The key of the parameter used to represent the page number to load, as specified in the pageParam option.
  • pageNo
    The page number that was clicked, as specified in the data-page attribute on the page link
  • originalEvent
    The original event object from the click event. Can be used to preventDefault on the event to stop the browser from following the link.
  • lastPage
    Boolean indicating whether the page being navigated to is the last available page.

 

paginationJump

Triggered when the user jumps to a new page using the pagination jump menu

Event data:

  • href
    The value of the data-baseurl attribute on the closest parent with the attribute (e.g. a table controller), or # if none exists.
  • paginationElem
    Reference to the pagination wrapper element
  • pageElem
    Reference to the page link element that was clicked
  • perPage
    The perPage value specified in the widget options
  • pageNo
    The page number that was clicked, as specified in the data-page attribute on the page link
  • originalEvent
    The original event object from the click event. Can be used to preventDefault on the event to stop the browser from following the link.
  • lastPage
    Boolean indicating whether the page being navigated to is the last available page.

  Report Guide


×