Pagination

Page navigation component for data tables. Pagination renders a Bootstrap pagination bar with page buttons, previous/next navigation, and ellipsis dots for large page ranges. It can be used as a standalone control or integrated into Table<T> / ResponsiveTable where it is managed automatically.

Import: @io-oidis-usercontrols/.../Pagination.js

Key constraints

• InnerPagesCount must be odd. Calling Select() with an even value throws an error.
• Localization requires subclassing. The localization property is protected and used in rendering — you cannot set it from the controller. Always use a subclass with constructor overrides.

Standalone Usage

When using Pagination independently (outside of a table), declare it in the panel constructor and bind it in the template:

// Panel
public readonly pagination : Pagination;

// Constructor
this.pagination = new Pagination();

<!-- innerHtml() -->
<div data-oidis-bind="${this.pagination}"></div>

Configure and wire up events in the controller:

// Controller — beforeLoad() or resolver()
$instance.pagination.ItemsPerPage(10);
$instance.pagination.Size(100);  // Total items from API

// Handle page changes
$instance.pagination.getEvents().setEvent(EventType.ON_SELECT, async () : Promise<void> => {
    const offset : number = $instance.pagination.getIndex();
    await this.loadPage(offset);
});

// Select the first page
$instance.pagination.Select(0);

Offset-based navigation

Pagination works with item offsets, not page numbers. Select(0) navigates to the first page, Select(25) navigates to the second page when ItemsPerPage is 25, and so on. The getIndex() method returns the current item offset.

Integrated Usage

When used with Table<T> or ResponsiveTable, pagination is built-in and managed automatically. The table handles page selection, event wiring, and data loading internally:

// No need to create Pagination — Table handles it
$instance.table.ItemsPerPage(25);
$instance.table.PagesLimit(5);

See Tables for the complete table pattern with pagination.

Configuration

All configuration methods follow the Oidis getter/setter pattern — call without arguments to read, with an argument to write.

Method	Default	Purpose
ItemsPerPage($value?)	25	Items displayed per page (minimum 1)
PagesLimit($value?)	5	Maximum page buttons shown (minimum 1)
Size($value?)	0	Total number of items across all pages
ShowPreviousButton($value?)	true	Show/hide the "Previous" navigation button
ShowNextButton($value?)	true	Show/hide the "Next" navigation button
InnerPagesCount($value?)	3	Number of inner page buttons between ellipsis dots (must be odd)
RangedPages($value?)	false	Display item ranges ("1-25") instead of page numbers

InnerPagesCount must be odd

InnerPagesCount must be set to an odd number. Calling Select() with an even InnerPagesCount throws an error. The default value of 3 is valid.

Navigation

Selecting a Page

Use Select($index) to navigate to a page by item offset:

// Navigate to the first page
$instance.pagination.Select(0);

// Navigate to the third page (with ItemsPerPage = 10)
$instance.pagination.Select(20);

Select() rebuilds the pagination UI and fires both ON_SELECT and ON_CHANGE events.

Reading the Current Offset

Use getIndex() to retrieve the current page offset:

const offset : number = $instance.pagination.getIndex();

Events

Event	Fired when
EventType.ON_SELECT	A page is selected (including programmatic calls to Select())
EventType.ON_CHANGE	A page changes (fired together with ON_SELECT)

Both events fire on every Select() call and on every user click on a page button, previous/next button, or ellipsis dots.

$instance.pagination.getEvents().setEvent(EventType.ON_SELECT, async () : Promise<void> => {
    const offset : number = $instance.pagination.getIndex();
    await this.fetchData(offset);
});

Ranged Pages

When RangedPages(true) is set, page buttons display item ranges instead of sequential page numbers:

Page	Normal display	Ranged display (ItemsPerPage = 25)
1	"1"	"1-25"
2	"2"	"26-50"
3	"3"	"51-75"
Last	"4"	"76-100"

The last page range adjusts to the actual total size, so if Size is 90, the last page displays "76-90".

$instance.pagination.RangedPages(true);
$instance.pagination.ItemsPerPage(25);
$instance.pagination.Size(90);
$instance.pagination.Select(0);

This is useful when showing record ranges in administrative or data-heavy views.

Localization

The Pagination class exposes a protected localization property of type IPaginationLocalization for customizing button labels:

interface IPaginationLocalization {
    previousButton : string;  // Default: "Previous"
    nextButton : string;      // Default: "Next"
}

Since localization is protected, customize it by subclassing and setting values in the constructor:

export class MyPagination extends Pagination {
    constructor() {
        super();
        this.localization = {
            previousButton: "Prev",
            nextButton: "Next"
        };
    }
}

Protected properties require subclassing

localization is protected and used in the rendering logic. You cannot set it from the controller after the component is created. Always use a subclass with constructor overrides, the same pattern as DropDownMultiselect localization.

API Reference

Method	Returns	Description
ItemsPerPage($value?)	number	Get/set items per page (default 25, minimum 1)
PagesLimit($value?)	number	Get/set maximum page buttons (default 5, minimum 1)
Size($value?)	number	Get/set total item count
ShowPreviousButton($value?)	boolean	Get/set "Previous" button visibility
ShowNextButton($value?)	boolean	Get/set "Next" button visibility
InnerPagesCount($value?)	number	Get/set inner page button count (must be odd, default 3)
RangedPages($value?)	boolean	Get/set ranged page display
Select($index)	void	Navigate to page by item offset, rebuilds UI, fires events
getIndex()	number	Get current page offset
Clear()	void	Remove all page buttons (inherited from GuiCommons)
AddChild($el)	void	Append a child component (inherited from GuiCommons)
getEvents()	ElementEventsManager	Access event manager for ON_SELECT / ON_CHANGE

---

See also: Tables | ResponsiveTable | User Controls