Element: <oj-paging-control>

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 0.7.0
Module:
  • ojpagingcontrol

QuickNav

Slots

Attributes

Methods

Other Topics


JET PagingControl

Description:

A JET PagingControl provides the ability to fetch and display a page of data at a time. The paging control will only fetch the items for the currently displayed page so it should be used for large datasets which can be fetched in pages. The number of items per page is uniform and configurable. The paging control can be used with any DataSource which implements the PagingModel interface, such as PagingTableDataSource and oj.PagingDataGridDataSource. That means that the Paging Control can be used with ojTable, ojDataGrid, and ojListView.

<oj-paging-control
  data='{{pagingModel}}'
  page-size='10'>
</oj-paging-control>

Keyboard End User Information

Target Key Action
Page Number Input Tab In Set focus to the input.
Arrow Page Navigation Tab Set focus to the first, previous, next, or last page arrow.
Numbered Page Links Tab Set focus to to the page link.

Touch End User Information

Target Gesture Action
Page Navigation Bar Swipe When mode='page', swiping left or right on the page navigation bar will either increment or decrement the page respectively.
Page Number Input Tap Set focus to the input.
Arrow Page Navigation Tap Navigates to the first, previous, next, or last page.
Numbered Page Links Tap Navigates to the page.

Accessibility

Application should specify an id for the paging control to generate an aria-label value.

The paging control also uses aria role = "region".


Usage

Signature:

interface PagingControlElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { PagingControlElement } from "ojs/ojpagingcontrol";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojpagingcontrol";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

contextMenu

The contextMenu slot is set on the oj-menu within this element. This is used to designate the JET Menu that this component should launch as a context menu on right-click, Shift-F10, Press & Hold, or component-specific gesture. If specified, the browser's native context menu will be replaced by the JET Menu specified in this slot.

The application can register a listener for the Menu's ojBeforeOpen event. The listener can cancel the launch via event.preventDefault(), or it can customize the menu contents by editing the menu DOM directly, and then calling refresh() on the Menu.

To help determine whether it's appropriate to cancel the launch or customize the menu, the ojBeforeOpen listener can use component API's to determine which table cell, chart item, etc., is the target of the context menu. See the JSDoc of the individual components for details.

Keep in mind that any such logic must work whether the context menu was launched via right-click, Shift-F10, Press & Hold, or component-specific touch gesture.

Deprecated:
Since Description
13.0.0 This web component no longer supports launching a context menu.

Attributes

data :PagingModel

The data to bind to the PagingControl.

Must implement the PagingModel interface PagingModel

Default Value:
  • null
Names
Item Name
Property data
Property change event dataChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-data-changed

load-more-options :Object

Options for loadMore mode.
Deprecated:
Since Description
7.0.0 This option is deprecated and will not get feature updates or support going forward. Please use native component high-water mark scrolling API instead (see Table, ListView, DataGrid). In addition, "loadMore" is not compatible with Table, Listview, DataGrid default scroll-policy "loadMoreOnScroll".
Names
Item Name
Property loadMoreOptions
Property change event loadMoreOptionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-load-more-options-changed

load-more-options.max-count :number

The maximum number items to display.

See the load-more-options attribute for usage examples.

Deprecated:
Since Description
7.0.0 This option is deprecated and will not get feature updates or support going forward. Please use native component high-water mark scrolling API instead (see Table, ListView, DataGrid).
Default Value:
  • 500
Names
Item Name
Property loadMoreOptions.maxCount

mode :"page"|"loadMore" mode :"page"

Paging mode.
Supported Values:
Value Description
loadMore Display paging control in high-water mark mode.
Deprecated:
Since Description
6.0.0 This option is deprecated and will not get feature updates or support going forward. Please use native component high-water mark scrolling API instead (see Table, ListView, DataGrid). In addition, "loadMore" is not compatible with Table, Listview, DataGrid default scroll-policy "loadMoreOnScroll".
page Display paging control in pagination mode.
Default Value:
  • "page"
Names
Item Name
Property mode
Property change event modeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-mode-changed

overflow :"fit"|"none"

Options for when the PagingControl width is too narrow to accommodate the controls in the paging control
Supported Values:
Value Description
fit Display as many controls as can fit in the PagingControl width.
none Display all controls. Controls which cannot fit will be truncated.
Default Value:
  • "fit"
Names
Item Name
Property overflow
Property change event overflowChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-overflow-changed

page-options :Object

Options for page mode.
Names
Item Name
Property pageOptions
Property change event pageOptionsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-page-options-changed

(nullable) page-options.layout :['auto'|'all'|'input'|'rangeText'|'pages'|'nav']

Array of paging navigation controls to be displayed (only applicable for numbers type).

This is an array of one or more supported values.

See the page-options attribute for usage examples.

Supported Values:
Value Description
all Display all controls
auto The PagingControl decides which controls to display
input Display the page input control
nav Display the navigation arrows
pages Display the page links
rangeText Display the page range text control
Default Value:
  • ['auto']
Names
Item Name
Property pageOptions.layout
The maximum number of page links to display (only applicable for numbers type). An ellipsis '...' will be displayed for pages which exceed the maximum. maxPageLinks must be greater than 4.

See the page-options attribute for usage examples.

Default Value:
  • 6
Names
Item Name
Property pageOptions.maxPageLinks

(nullable) page-options.orientation :string

The orientation of the page links.

See the page-options attribute for usage examples.

Supported Values:
Value
horizontal
vertical
Default Value:
  • "horizontal"
Names
Item Name
Property pageOptions.orientation

(nullable) page-options.type :string

The type of page links.

See the page-options attribute for usage examples.

Supported Values:
Value Description
dots Render dots
numbers Render numeric page links
Default Value:
  • "numbers"
Names
Item Name
Property pageOptions.type

page-size :number

Page size.

Default Value:
  • 25
Names
Item Name
Property pageSize
Property change event pageSizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-page-size-changed

translations :object|null

A collection of translated resources from the translation bundle, or null if this component has no resources. Resources may be accessed and overridden individually or collectively, as seen in the examples.

If the component does not contain any translatable resource, the default value of this attribute will be null. If not, an object containing all resources relevant to the component.

If this component has translations, their documentation immediately follows this doc entry.

Names
Item Name
Property translations
Property change event translationsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-translations-changed

translations.full-msg-item :string

Singe item page index text.

See the translations attribute for usage examples.

Default Value:
  • "{pageTo} of {pageMax} items"
Names
Item Name
Property translations.fullMsgItem

translations.full-msg-item-approx :string

Single item page index text for approximate number of items.

See the translations attribute for usage examples.

Default Value:
  • "{pageTo} of approx {pageMax} items"
Names
Item Name
Property translations.fullMsgItemApprox

translations.full-msg-item-at-least :string

Single item page index text for minimum number of items.

See the translations attribute for usage examples.

Default Value:
  • "{pageTo} of at least {pageMax} items"
Names
Item Name
Property translations.fullMsgItemAtLeast

translations.full-msg-item-range :string

Item range page index text.

See the translations attribute for usage examples.

Default Value:
  • "{pageFrom}-{pageTo} of {pageMax} items"
Names
Item Name
Property translations.fullMsgItemRange

translations.full-msg-item-range-approx :string

Item range page index text for approximate number of items.

See the translations attribute for usage examples.

Default Value:
  • "{pageFrom}-{pageTo} of approx {pageMax} items"
Names
Item Name
Property translations.fullMsgItemRangeApprox

translations.full-msg-item-range-at-least :string

Item range page index text for minimum number of items.

See the translations attribute for usage examples.

Default Value:
  • "{pageFrom}-{pageTo} of at least {pageMax} items"
Names
Item Name
Property translations.fullMsgItemRangeAtLeast

translations.label-acc-nav-first-page :string

First page label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "First Page"
Names
Item Name
Property translations.labelAccNavFirstPage

translations.label-acc-nav-last-page :string

Last page label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "Last Page"
Names
Item Name
Property translations.labelAccNavLastPage

translations.label-acc-nav-next-page :string

Next page label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "Next Page"
Names
Item Name
Property translations.labelAccNavNextPage

translations.label-acc-nav-page :string

Current page label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "Page"
Names
Item Name
Property translations.labelAccNavPage

translations.label-acc-nav-previous-page :string

Previous page label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "Previous Page"
Names
Item Name
Property translations.labelAccNavPreviousPage

translations.label-acc-page-number :string

Paging control page number label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "Page {pageNum} content loaded"
Names
Item Name
Property translations.labelAccPageNumber

translations.label-acc-paging :string

Paging control label for screen readers.

See the translations attribute for usage examples.

Default Value:
  • "Pagination"
Names
Item Name
Property translations.labelAccPaging

translations.label-load-more :string

Load more link text.

See the translations attribute for usage examples.

Deprecated:
Since Description
7.0.0 This option is deprecated and will not get feature updates or support going forward. Please use native component high-water mark scrolling API instead (see Table, ListView, DataGrid).
Default Value:
  • "Show More..."
Names
Item Name
Property translations.labelLoadMore

translations.label-load-more-max-rows :string

Label for when load more has reached the maximum limit of rows to fetch.

See the translations attribute for usage examples.

Deprecated:
Since Description
7.0.0 This option is deprecated and will not get feature updates or support going forward. Please use native component high-water mark scrolling API instead (see Table, ListView, DataGrid).
Default Value:
  • "Reached Maximum Limit of {maxRows} rows"
Names
Item Name
Property translations.labelLoadMoreMaxRows

translations.label-nav-input-page :string

Current page label.

See the translations attribute for usage examples.

Default Value:
  • "Page"
Names
Item Name
Property translations.labelNavInputPage

translations.label-nav-input-page-max :string

Maximum page label.

See the translations attribute for usage examples.

Default Value:
  • "of {pageMax}"
Names
Item Name
Property translations.labelNavInputPageMax

translations.max-page-links-invalid :string

Invalid max page links value error.

See the translations attribute for usage examples.

Default Value:
  • "Value for maxPageLinks is invalid."
Names
Item Name
Property translations.maxPageLinksInvalid

translations.msg-item-no-total :string

Single item page index text when no total number of items is available.

See the translations attribute for usage examples.

Default Value:
  • "{pageTo} items"
Names
Item Name
Property translations.msgItemNoTotal

translations.msg-item-range-current :string

Item range text for known row count.

See the translations attribute for usage examples.

Default Value:
  • "{pageFrom}-{pageTo}"
Names
Item Name
Property translations.msgItemRangeCurrent

translations.msg-item-range-current-single :string

Item range text for single page range.

See the translations attribute for usage examples.

Default Value:
  • "{pageFrom}"
Names
Item Name
Property translations.msgItemRangeCurrentSingle

translations.msg-item-range-items :string

Item range "items" text.

See the translations attribute for usage examples.

Default Value:
  • "items"
Names
Item Name
Property translations.msgItemRangeItems

translations.msg-item-range-no-total :string

Item range page index text when no total number of items is available.

See the translations attribute for usage examples.

Default Value:
  • "{pageFrom}-{pageTo} items"
Names
Item Name
Property translations.msgItemRangeNoTotal

translations.msg-item-range-of :string

Item range "of" text.

See the translations attribute for usage examples.

Default Value:
  • "of"
Names
Item Name
Property translations.msgItemRangeOf

translations.msg-item-range-of-approx :string

Item range of "approx" text.

See the translations attribute for usage examples.

Default Value:
  • "approx."
Names
Item Name
Property translations.msgItemRangeOfApprox

translations.msg-item-range-of-at-least :string

Item range of "at least" text.

See the translations attribute for usage examples.

Default Value:
  • "at least"
Names
Item Name
Property translations.msgItemRangeOfAtLeast

translations.page-invalid :string

Invalid page error.

See the translations attribute for usage examples.

Default Value:
  • "The page value entered is invalid."
Names
Item Name
Property translations.pageInvalid

translations.tip-nav-first-page :string

First page button tip.

See the translations attribute for usage examples.

Default Value:
  • "First"
Names
Item Name
Property translations.tipNavFirstPage

translations.tip-nav-input-page :string

Current page tip.

See the translations attribute for usage examples.

Default Value:
  • "Go To Page"
Names
Item Name
Property translations.tipNavInputPage

translations.tip-nav-last-page :string

Last page button tip.

See the translations attribute for usage examples.

Default Value:
  • "Last"
Names
Item Name
Property translations.tipNavLastPage

translations.tip-nav-next-page :string

Next page button tip.

See the translations attribute for usage examples.

Default Value:
  • "Next"
Names
Item Name
Property translations.tipNavNextPage

Current page link tip.

See the translations attribute for usage examples.

Default Value:
  • "Go To Page {pageNum}"
Names
Item Name
Property translations.tipNavPageLink

translations.tip-nav-previous-page :string

Previous page button tip.

See the translations attribute for usage examples.

Default Value:
  • "Previous"
Names
Item Name
Property translations.tipNavPreviousPage

Methods

firstPage : {Promise.<null>}

Load the first page of data
Throws:
Type
Error
Returns:

promise object triggering done when complete.

Type
Promise.<null>

getProperty(property) : {any}

Retrieves the value of a property or a subproperty. The return type will be the same as the type of the property as specified in this API document. If the method is invoked with an incorrect property/subproperty name, it returns undefined.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Since:
  • 4.0.0
Returns:
Type
any
Example

Get a single subproperty of a complex property:

let subpropValue = myComponent.getProperty('complexProperty.subProperty1.subProperty2');

lastPage : {Promise.<null>}

Load the last page of data
Throws:
Type
Error
Returns:

promise object triggering done when complete.

Type
Promise.<null>

loadNext : {Promise.<null>}

Load the next set of data
Throws:
Type
Error
Returns:

promise object triggering done when complete.

Type
Promise.<null>

nextPage : {Promise.<null>}

Load the next page of data
Throws:
Type
Error
Returns:

promise object triggering done when complete.

Type
Promise.<null>

page(page) : {Promise.<null>}

Load the specified page of data
Parameters:
Name Type Description
page number Page number.
Throws:
Type
Error
Returns:

promise object triggering done when complete.

Type
Promise.<null>

previousPage : {Promise.<null>}

Load the previous page of data
Throws:
Type
Error
Returns:

promise object triggering done when complete.

Type
Promise.<null>

refresh : {void}

Refresh the paging control.
Returns:
Type
void

setProperties(properties) : {void}

Performs a batch set of properties. The type of value for each property being set must match the type of the property as specified in this API document.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a batch of properties:

myComponent.setProperties({"prop1": "value1", "prop2.subprop": "value2", "prop3": "value3"});

setProperty(property, value) : {void}

Sets a property or a subproperty (of a complex property) and notifies the component of the change, triggering a [property]Changed event. The value should be of the same type as the type of the attribute mentioned in this API document.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Since:
  • 4.0.0
Returns:
Type
void
Example

Set a single subproperty of a complex property:

myComponent.setProperty('complexProperty.subProperty1.subProperty2', "someValue");