Pagination

Introduction to using the Pagination component

Pagination is used when a single page cannot contain all information, allowing switching pages to continue reading from where you left off. Common elements include page numbers, previous/next page, first page, last page, total number of items, total number of pages, current page number, jump to page, etc., helping users quickly navigate to a specific page to view data.

Tip: Trigger after mounted

Example

<bpa-pagination
  :total="totalPages"
  :current-page.sync="currentPage"
  :pager-count="pagerCount"
  :pageSize="pageSize"
  :pageSizeOptions="pageSizeOptions"
  :layout=['total_item', 'total_page', 'page_size', 'first', 'last', 'jump']
  @change:page="onChangePage"
  @change:pageSize="onChangeSize"
/>

Attributes

Name	Value	Type	Default	Required	Note
total		Number			Total number of items
currentPage		Number			Set the current page
pagerCount		Number	5		Set how many page numbers to display
pageSizeOption		Array	[ { label: '10', value: 10 }, { label: '20', value: 20 }, { label: '50', value: 50 }, { label: '100', value: 100 }, ]		Allows setting a dropdown to choose how many items are shown per page
pageSize		Number	10		Number of items per page
layout		Array	['total_item', 'total_page', 'page_size', 'first', 'last', 'jump']		Set which components to display
size		String			Button size

Events

Name	Parameters	Description
sync-page-param	{currentPage: number}	Triggered when changing pages
change:page		Triggered when changing pages
change:pageSize

Demo

On small screens this component only displays the current page for pagerCount. If you only see the current page on the demo page, try adjusting the resolution or shrinking the browser window to view the full appearance.