Pagination

Overview

When your application retrieves data, the amount of data retrieved is either bounded — meaning you have at least a rough idea how much data is coming back — or the amount of data retrieved is unbounded.

When the amount of data is unbounded, it’s best to retrieve the data in discrete chunks. Retrieving data can be costly in terms of server, network, and client resources. Since you won’t know which parts of the unbounded data the user is interested in (beyond any search parameters provided), it’s best not to attempt to retrieve all of the data at once.

After your app has retrieved one or more discrete chunks of data, you can use a pagination approach where one “page” of data is displayed at a time. The user is typically given options to move to the next or previous page, or even a specific page, but only one page displays at a time. This approach lends itself to displaying listings, search results, and photo galleries. Many users like to see all options at once, so offer the user a “View all” option if feasible.

Development

Web component development

Component reference

rui-data-pager

Implementation

Begin by importing the rui-data-pager module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-data-pager/rui-data-pager-imports';

Use the rui-data-pager element for pagination.

<rui-data-pager
    maxPageButtons="10"
    firstText="First"
    lastText="Last"
    previousText="Previous"
    nextText="Next"
    [totalItems]="employeeTotalCount"
    [itemsPerPage]="employeesPerPage"
    [pageIndex]="employeePageIndex"
    (rui-data-pager-page-index-change)="pageChanged($event)">
</rui-data-pager>

Angular wrapper development

Wrapper reference

ngx-bootstrap pagination

Implementation

Begin by importing the PaginationModule into your application.

import { PaginationModule } from 'ngx-bootstrap/pagination';

@NgModule({
    imports: [
        ...
        PaginationModule.forRoot(),
        ...
    ]
})
export class AppModule(){}

Use the pagination element for pagination.

<pagination class="page-bar"
    [totalItems]="EmployeeTotalCount" [itemsPerPage]="EmployeesPerPage"
    [(ngModel)]="EmployeePageIndex" (pageChanged)="pageChanged($event)">
</pagination>

Design

Figma design

If you want to show an example of pagination buttons in an artboard, add an appropriate combination of Previous, page number, and Next buttons:

• If you’re showing the first page button as active, then the Previous button is disabled but all other buttons are enabled.
• If you’re showing a “middle” page as active, then all buttons are enabled.
• If you’re showing the last page button as active, then the Next button is disabled but all other buttons are enabled.
• Only show one of the page buttons as active.

Adobe XD design

If you want to show an example of pagination buttons in an artboard, add an appropriate combination of Previous, page number, and Next buttons:

• If you’re showing the first page button as active, then the Previous button is disabled but all other buttons are enabled.
• If you’re showing a “middle” page as active, then all buttons are enabled.
• If you’re showing the last page button as active, then the Next button is disabled but all other buttons are enabled.
• Only show one of the page buttons as active.