vue-paginate

This version only works with Vue 2.0. For Vue 1.0, check out the 1.0 branch.

The idea of vue-paginate is pretty simple. You give it an array of items; specify how many items per page; then get your list of items paginated!

Setup

npm install vue-paginate --save

You have two ways to setup vue-paginate:

CommonJS (Webpack/Browserify)

import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)

var VuePaginate = require('vue-paginate')
Vue.use(VuePaginate)

Include

Include it directly with a <script> tag. In this case, you don't need to write Vue.use(VuePaginate), this will be done automatically for you.

Usage

Before you start, you may want to check a live example on jsfiddle.

vue-paginate consists of two main components: Paginate and PaginateLinks. And both get registered globally once the plugin is installed.

To paginate any list of data, we have to follow these three small steps:

Register the name of the paginated list.
Use Paginate component to paginate and display the paginated list.
Use PaginateLinks component to display the links for the pagination.

Now, let’s see them in an example:

Example

In this example, we have a small list of items registered in our data list.

new Vue({
  el: '#app',
  data: {
    langs: ['JavaScript', 'PHP', 'HTML', 'CSS', 'Ruby', 'Python', 'Erlang']
  }
})

Now, let’s see how we can paginate this list to display two items per page.

First step is to register the name of our future paginated list. We register it by adding it to an array called paginate.

new Vue({
  el: '#app',
  data: {
    langs: ['JavaScript', 'PHP', 'HTML', 'CSS', 'Ruby', 'Python', 'Erlang'],
    paginate: ['languages']
  }
})

Note that you can name it the same as the original list – I named it differently here just for the sake of clarity.

Second step is to use the Paginate component to paginate the list. Since it was globally registered by the plugin, you don’t have to import it.

This component requires at least two props to be passed. The name of the registered paginated list – languages in this case. And the list that you want to paginate – langs in this case.

After that, you start using the paginated list inside the body of that <paginate> component. And, you get access to the paginated list using the method paginated('languages').

Here’s how it looks in action:

<paginate
  name="languages"
  :list="langs"
  :per="2"
>
  <li v-for="lang in paginated('languages')">
    {{ lang }}
  </li>
</paginate>

Note how we specified the number of items per page using the per prop. If we didn’t specify it here, it would use the default value instead, which is 3 items per page.

That’s it! Now your list has been paginated successfully. And you still have access to the original langs list if you need it.

However, we still don’t have a way to navigate through those pages. Here’s where PaginateLinks component comes into play.

All that component needs to know is the name of the registered paginated list. We pass that using its for prop. Like this:

<paginate-links for="languages"></paginate-links>

So, that was the third step!

Types of paginate links

vue-paginate provides us with three different types of pagination links:

Full list of links. This is the default behavior, which displays all available page links from page 1 to N.
Simple links. It contains only two links: Previous and Next.
Limited links. It limits the number of displayed links, and provides left and right arrows to help you navigate between them.

Full links

To use this you don’t have to do anything; this is the default behavior.

Simple links

For this, we use the simple prop, which accepts an object that contains the names of the Previous and Next links. For example:

<paginate-links
  for="languages"
  :simple="{
    prev: 'Back',
    next: 'Next'
  }"
></paginate-links>

Limited links

To activate this mode, you just need to specify the limit using the limit prop. Like this:

<paginate-links
  for="languages"
  :limit="2"
></paginate-links>

Listening to links @change event

When the current page changes, PaginateLinks emits an event called change to inform you about that. It also passes the switched page numbers with it, if you need them.

<paginate-links
  for="languages"
  @change="onLangsPageChange"
></paginate-links>

methods: {
  onLangsPageChange (toPage, fromPage) {
    // handle here…
  }
}

Paginate container

The default element vue-paginate uses for the <paginate> container is UL. But, of course, you can change it to whatever you want using the tag prop. And the same is true for its class using the class prop.

<paginate
  name="languages"
  :list="langs"
  :per="2"
  tag="div"
  class="paginate-langs"
>
  <li v-for="lang in paginated('languages')">
    {{ lang }}
  </li>
</paginate>

Updating the full list

Since this plugin is built using the components system, you get all the flexibility and power that regular Vue components provide. I’m talking here specifically about the reactivity system.

So, when you want to update the original list (e.g. langs), just update it; everything will work seamlessly!

Filtering the paginated list

There’s nothing special the plugin does to support list filtering. It’s your responsibility to filter the list you pass to <paginate> component via list prop.

So, if we were to filter the list (or any other operation), we would have something similar to this:

// Assume we have a text input bound to `searchLangs` data via v-model for example.
computed: {
  fLangs () {
    const re = new RegExp(this.searchLangs, 'i')
    return this.langs.filter(lang => lang.match(re))
  }
}

Then just pass that fLangs to the list prop instead of the original langs.

Links customization

In vue-paginate, you can customize every bit of your pagination links.

But first, let’s see the html structure used for all link types:

<ul>
  <li><a>1</a></li>
  <li><a>2</a></li>
  <!-- … -->
</ul>

Now, let’s see what CSS selectors we often need to use:

All links containers:

ul.paginate-links

Specific links container:

ul.paginate-links.languages

languages here is the name of your paginated list.

Current page:

This only works for full & limited links.

ul.paginate-links > li.active > a

Previous & Next Links:

Obviously, this is only for simple links.

Previous –> ul.paginate-links > li.prev > a

Next –> ul.paginate-links > li.next > a

Disabled Next/Previous Links:

ul.paginate-links > li.disabled > a

Limited Links:

Number links –> ul.paginate-links > li.number > a

Left arrow –> ul.paginate-links > li.left-arrow > a

Right arrow –> ul.paginate-links > li.right-arrow > a

Ellipses –> ul.paginate-links > li.ellipses > a

Adding additional classes

In some cases, especially when you're using a CSS framework, you'll need to add additional classes to your links elements. You can do so simply by using the classes prop on your PaginateLinks component. This prop takes an object that contains the element's selector as the key, and the class you want to add as the value.

Here's an example:

<paginate-links
  for="languages"
  :simple="{
    prev: 'Back',
    next: 'Next'
  }"
  :classes="{
    'ul': 'simple-links-container',
    '.next > a': 'next-link',
    '.prev > a': ['prev-link', 'another-class'] // multiple classes
  }"
></paginate-links>

Note that this feature works on all link types – full links, simple links, and limited links.

License

MIT

matbrady/vue-paginate