FxPagination

When displaying large datasets, use pagination to divide data into separate pages.

Attributes

Parameter	Description	Type	Options	Default
small	whether to use small pagination style	boolean	—	false
background	whether buttons have background color	boolean	—	false
page-size	number of items per page (supports .sync modifier)	number	—	10
total	total item count	number	—	—
page-count	total page count. Either total or page-count can display page numbers; use total property to support page-sizes changes	Number	—	—
pager-count	number of pagination buttons, will collapse when page count exceeds this value	number	odd number between 5 and 21	7
current-page	current page number (supports .sync modifier)	number	—	1
layout	component layout, subcomponents separated by commas	String	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
page-sizes	options for items per page selector	number[]	—	[10, 20, 30, 40, 50, 100]
popper-class	custom class name for page size selector dropdown	string	—	—
prev-text	previous page text (replaces icon)	string	—	—
next-text	next page text (replaces icon)	string	—	—
disabled	whether pagination is disabled	boolean	—	false
hide-on-single-page	whether to hide when only one page exists	boolean	—	-

Events

Event Name	Description	Parameters
size-change	triggers when page-size changes	new page size
current-change	triggers when current-page changes	new current page
prev-click	triggers when previous page button is clicked	new current page
next-click	triggers when next page button is clicked	new current page

Slot

name	Description
—	custom content (requires 'slot' in layout)

Basic Usage

Few pages

More than 7 pages

Set layout to specify displayed elements (comma-separated). prev shows previous page button, next shows next page button, pager shows page number list. Additional options: jumper (page jumper), total (total items), size (page size selector), and -> (right-aligns subsequent elements).

<div class="block">
  <span class="demonstration">Few pages</span>
  <fx-pagination
    layout="prev, pager, next"
    prev-text="Previous"
    next-text="Next"
    :total="50">
  </fx-pagination>
</div>
<div class="block">
  <span class="demonstration">More than 7 pages</span>
  <fx-pagination
    layout="prev, pager, next"
    :total="1000">
  </fx-pagination>
</div>

Expand Copy Copy

Maximum Page Buttons

By default, pagination collapses when exceeding 7 pages. Use pager-count to set maximum visible buttons.

<fx-pagination
  :page-size="20"
  :pager-count="11"
  layout="prev, pager, next"
  :total="1000">
</fx-pagination>

Expand Copy Copy

Background Color

Add background property to enable button backgrounds.

<fx-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</fx-pagination>

Expand Copy Copy

Small Pagination

Use compact pagination in space-limited scenarios.

Simply set small to true.

<fx-pagination
  small
  layout="prev, pager, next"
  :total="50">
</fx-pagination>

Expand Copy Copy

Additional Features

Add functional modules as needed.

Show total

Adjust page size

Jump to

Full features

Complete example using size-change and current-change events. page-sizes accepts integer arrays for page size options.

<template>
  <div class="block">
    <span class="demonstration">Show total</span>
    <fx-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage1"
      :page-size="100"
      layout="total, prev, pager, next"
      :total="1000">
    </fx-pagination>
  </div>
  <div class="block">
    <span class="demonstration">Adjust page size</span>
    <fx-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage2"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="sizes, prev, pager, next"
      :total="1000">
    </fx-pagination>
  </div>
  <div class="block">
    <span class="demonstration">Jump to</span>
    <fx-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage3"
      :page-size="100"
      layout="prev, pager, next, jumper"
      :total="1000">
    </fx-pagination>
  </div>
  <div class="block">
    <span class="demonstration">Full features</span>
    <fx-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </fx-pagination>
  </div>
</template>
<script>
  export default {
    methods: {
      handleSizeChange(val) {
        console.log(` items per page`);
      },
      handleCurrentChange(val) {
        console.log(`Current page: `);
      }
    },
    data() {
      return {
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    }
  }
</script>

Expand Copy Copy

Hide When Single Page

Hide pagination when only one page exists via hide-on-single-page.

<div>
 <fx-switch v-model="value">
 </fx-switch>
 <fx-pagination
  :hide-on-single-page="value"
  :total="5"
  layout="prev, pager, next">
</fx-pagination>
</div>

<script>
  export default {
    data() {
      return {
        value: false
      }
    }
  }
</script>

Expand Copy Copy