Vue Pagination 2
Click here to see it in action.
Note: This package is for use with Vuejs 2. For version 1 please use v-pagination instead.
Simple, generic and non-intrusive pagination component for Vue.js version 2.
Dependencies
- Vue.js (>=2.0.0-rc.1). Required.
- CSS: Bootstrap 3 or Bootstrap 4 or Bulma.
Installation
NPM
npm install vue-pagination-2
import the script:
import Pagination from 'vue-pagination-2';
Script tag
Grab the minified version under dist/vue-pagination-2.min.js
.
It will export a global Pagination
variable.
Usage
Register the component globally or locally:
Vue;
OR
...components: Pagination { return page: 2 }...
HTML:
<pagination v-model="page" :records="500" @paginate="myCallback"></pagination>
props:
-
records
number
required
number of records -
per-page
number
optional
records per page. Default:25
-
options
object
optional
:chunk
number
max pages per chunk. Default:10
chunksNavigation
string
Which method to use when navigating outside chunks boundries. Default:fixed
. Options are:scroll
- the range of pages presented will incrementally change when navigating to a page outside the chunk (e.g 1-10 will become 2-11 once the user presses the next arrow to move to page 11).fixed
- navigation will occur between fixed chunks (e.g 1-10, 11-20, 21-30 etc.). Double arrows will be added to allow navigation to the beginning of the previous or next chunk.
theme
string
CSS theme used for styling. Supported:bootstrap3
,bootstrap4
,bulma
. Default:bootstrap3
.format
boolean
Format numbers using a separating comma. Default:true
edgeNavigation
Show links to first and last pages. Default:false
texts
object
optional
-
count
total records text. It can consist of up to 3 parts, divided by|
.- First part: used when there are multiple pages
- Second part: used when there is only one page
- Third part: used when there is only one record.
Default:
Showing {from} to {to} of {count} records|{count} records|One record
-
first
First page text. Default:First
-
last
last page text. Default:Last
-
Note: if you want to display the page number rather than the records range, use
{page}
and{pages}
as a placeholders. E.g:Showing page {page} out of {pages}
Custom Event
When a page is selected a custom paginate
event will be dispatched.
Listen to it on the component and run your callback
Computed Properties
totalPages
totalChunks
currentChunk