Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Event

Type

Description

Parameters

Parameter Description

initiatePageChange

default

Fired when the implementation wishes to initiate the change of state corresponding to the selection of a new page

(pageRequest)

A structure which includes either the member pageIndex representing the new required page index, or relativePage representing an offset from the current page position

initiatePageSizeChange

default

Fired when the implementation wishes to initiate the change of state corresponding to an updated page size for the visible range

(newPageSize)

an integer representing the desired new page size

...

Anchor
options
options

Options

The following options to the creator function can be used to customize the behaviour of the Pager component:

Name

Description

Values

Default

selectors

Javascript object containing selectors for various fragments of the Pager component.

The object may contain any subset of the following keys:
  pagerBar
  pagerBarSecondary
  summary
  pageSize
  
Any values not provided will revert to the default.

Code Block
javascript
javascript

        selectors: {
            pagerBar: ".pager-top",
            pagerBarSecondary: ".pager-bottom",
            summary: ".pager-summary",
            pageSize: ".pager-page-size"
        },

styles

Javascript object containing CSS style names that will be applied to the Pager component.

The object may contain any subset of the following keys:
  currentPage
  disabled
Any values not provided will revert to the default.

Code Block
javascript
javascript

styles: {
    currentPage: "current-page",
    disabled: "disabled"
}

pageWillChange

A function that will be called each time a new page has been selected. This function will most likely retrieve data for the selected page, or otherwise update the data.

a function

Code Block
javascript
javascript

pageWillChange: function (link) {
}

...

that organization

Where the component that is constructed by a line such as

...

Field

Type

Primary/Computed

Description

pageIndex

integer

Primary

The current index of the page, expressed 0-based amongst the range of pages

pageSize

integer

Primary

The number of "items" which may be shown on a page

totalRange

integer

Primary

The total count of "items" in the underlying user's data model

pageCount

integer

Computed

The limit of the range in which pageIndex is expressed

<ac:structured-macro ac:name="unmigrated-wiki-markup" ac:schema-version="1" ac:macro-id="db5fd685bf7c0231-1135ad61-4602485b-9cd4839f-4d574f003f5b125eda1ca38e"><ac:plain-text-body><![CDATA[

[pageLimit]

integer

Computed

The limit of the range of items shown on the current page represented by the model

]]></ac:plain-text-body></ac:structured-macro>

(pageLimit is not actually stored within the model at any point, but is supplied a computation function computePageLimit to match computePageCount by which pageCount is derived from the primary fields. Anchoroptionsoptions

Options

The following options to the creator function can be used to customize the behaviour of the Pager component:

...

Name

...

Description

...

Values

...

Default

...

selectors

...

Javascript object containing selectors for various fragments of the Pager component.

...

The object may contain any subset of the following keys:
  pagerTop
  pagerBottom
  pageLinks
  previous
  next
Any values not provided will revert to the default.

...


selectors: {
    pagerTop: ".pager-top",
    pagerBottom: ".pager-bottom",
    pageLinks: ".page-link",
    previous: ".previous",
    next: ".next"
}

...

styles

...

Javascript object containing CSS style names that will be applied to the Pager component.

...

The object may contain any subset of the following keys:
  currentPage
  disabled
Any values not provided will revert to the default.

...


styles: {
    currentPage: "current-page",
    disabled: "disabled"
}

...

pageWillChange

...

.

...

a function

...

...

Dependencies

The Pager dependencies can be met by including the minified Fluid-all.js file in the header of the HTML file:

...