lokyoung / vuejs-paginate

A Vue.js(v2.x+) component for creating pagination.

vuejs-paginate

A Vue.js(v2.x+) component to make pagination. Inspired by react-paginate.

Easy to use by providing simple api. And you can customize the style of this component by css.

Online demo

Installation

NPM

Install the npm package.

$ npm install vuejs-paginate --save

Register the component.

• ES5

var Paginate = require('vuejs-paginate')
Vue.component('paginate', Paginate)

• ES6

import Paginate from 'vuejs-paginate'
Vue.component('paginate', Paginate)

Note: For version <= 0.5.0, use Vue.use(Paginate) to register the component after import the package. But recommend to use the latest version now.

CDN

Include the source file.

<!-- use the latest release -->
<script src="https://unpkg.com/vuejs-paginate@latest"></script>
<!-- or use the specify version -->
<script src="https://unpkg.com/[email protected]"></script>

Register the component.

Vue.component('paginate', VuejsPaginate)

Usage

In Vue Template

Basic Usage

<paginate
  :page-count="20"
  :click-handler="functionName"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'className'">
</paginate>

Note: In vue template, camelCase and kebab-case are both supported. For example, you can either use prop page-count or pageCount. They are leading to the same result.

So this is also avaliable

<paginate
  :pageCount="20"
  :clickHandler="functionName"
  :prevText="'Prev'"
  :nextText="'Next'"
  :containerClass="'className'">
</paginate>

Example

<template>
  <paginate
    :page-count="20"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</template>

<script>
export default {
  methods: {
    clickCallback (pageNum) => {
      console.log(pageNum)
    }
  }
}
</script>

<style lang="css">
.pagination {
}
.page-item {
}
</style>

Value Binding

Use v-model to set the selected page number. You can programmatically modify the current page by using this.

<template>
  <paginate
    v-model="page"
    :page-count="20"
    :page-range="3"
    :margin-pages="2"
    :click-handler="clickCallback"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
    :page-class="'page-item'">
  </paginate>
</template>

<script>
export default {
  data() {
    return {
      page: 10
    }
  }
}
</script>

In HTML

Must use kebab-case for props in pure HTML.

Example

JavaScript

Vue.component('paginate', VuejsPaginate)

new Vue({
  el: '#app',
  methods: {
    clickCallback: function(pageNum) {
      console.log(pageNum)
    }
  }
})

HTML

<div id="app">
  <paginate
    :page-count="10"
    :container-class="pagination"
    :prev-text="prev"
    :next-text="next"
    :click-handler="clickCallback">
  </paginate>
</div>

Props

Name	Type	Description
page-count	Number	Total count of pages. required
page-range	Number	Range of pages which displayed. default: 3 (Note: It is recommended to use an odd number, so that the same number of pages are displayed before and after the active page. If using an even number, there will be one more page number before the active page than after the current page)
margin-pages	Number	The number of displayed pages for margins. default: 1
prev-text	String	Text for the previous button. You can use HTML here. default: Prev
next-text	String	Text for the next button. You can use HTML here. default: Next
break-view-text	String	Text for the break view indicator. default: ...
initial-page Deprecated after v2.0.0	Number	The index of initial page which selected. default: 0
force-page	Number	The page number of overridden selected page.
click-handler	Function	The method to call when page clicked. Use clicked page number as parameter.
container-class	String	CSS class name for the layout.
page-class	String	CSS class name for tag li of each page element.
page-link-class	String	CSS class name for tag a of each page element.
prev-class	String	CSS class name for tag li of previous element.
prev-link-class	String	CSS class name for tag a of previous element.
next-class	String	CSS class name for tag li of next element.
next-link-class	String	CSS class name for tag a of next element.
break-view-class	String	CSS class name for tag li of break view element.
break-view-link-class	String	CSS class name for tag a of break view element.
active-class	String	CSS class name for active page element. default: active
disabled-class	String	CSS class name for disabled page element. default: disabled
no-li-surround	Boolean	Support no li tag surround a tag. default: false
first-last-button	Boolean	Support buttons to turn to the first and last page. default: false
first-button-text	String	Text for first button. (Not visible when first-last-button is false. You can use HTML here.) default: 'First'
last-button-text	String	Text for last button. (Not visible when first-last-button is false. You can use HTML here.) default: 'Last'
hide-prev-next	Boolean	Hide prev/next button when there is no previous or next page. default: false

Customize inner HTML (experimental)

You can customize the inner HTML of the previous button, next button, and break view indicator, with the slot tag.

Slot names

Name	Description
prevContent	Previous button
nextContent	Next button
breakViewContent	Break view indicator

Note Slot of prevContent and nextContent are not supported after v1.9.5. You can directly set the HTML by prev-text and next-text props.

Example

<paginate
  :page-count="10"
  :container-class="pagination"
  :prev-text="prev"
  :next-text="next"
  :click-handler="clickCallback">

  <span slot="prevContent">Changed previous button</span>
  <span slot="nextContent">Changed next button</span>
  <span slot="breakViewContent">
    <svg width="16" height="4" viewBox="0 0 16 4">
      <circle fill="#999999" cx="2" cy="2" r="2" />
      <circle fill="#999999" cx="8" cy="2" r="2" />
      <circle fill="#999999" cx="14" cy="2" r="2" />
    </svg>
  </span>

</paginate>

Demo

You can see the demo for quickly understand how to use this package.

$ git clone [email protected]:lokyoung/vuejs-paginate.git
$ cd vuejs-paginate
$ npm install
$ npm run demo

Check the code from ./demo/index.html and ./demo/App.vue.

vuejs-paginate's Issues

Using <span> instead of <a>

Hi, thanks for the nice work.

Is it possible to use <span> tag instead of <a>?

CSS styles are not applied fully to an <a> without href, first one is <pagination> and the second one is Bootstrap 4 pagination:

Pagination on Bulma

Hello, how use correctly with Bulma Framework?
The Paginate component listem click only if Click exactly in number inside button, if click in some location of button not listem clickhandler.

my code:

<nav class="pagination"> <paginate :page-class="'pagination-link '" :pageCount="last_page" :clickHandler="search" :prevText="'Anterior'" :nextText="'Próximo'" :page-range="8" :containerClass="'pagination-list'"></paginate> </nav>

Thank's a lot by your component! It's very easy to use and functionaly! And sorry for my English!

Two same paginates don't handle force-page changes properly.

There are 2 same paginates which use same top level :force-page="listPage".
Expected behavior:
When listPage property changes both components should point on the selected page

Real behavior:
pager doesn't update the selected page (until it is "activated" any page is cliecked on the component)

To reproduce try this fiddle:
https://jsfiddle.net/9bocfrpw/3/

1. click the number on pager1 and notice that on pager2 page is still 1 (you can click any number of pages on the pager1, pager2 page will remain 1)
2. now click any page on page2. after that pagers are "in sync" and will work as expeted

thanks
Mikhail

Keep two paginations in sync

We have two paginations: one on the top of a table, another one at the end. We must keep them in sync. I believe that exposing the selected property can help to achieve this and don't compromise the structure of the component.

Is there another way to do so?
Is this something you can consider to do?

Thanks!

Custom class for active item?

Feature request for custom class for active item (a and li)

is it possible to alter "pageCount" programmatically?

I understand that page-count is required, but is it possible to alter its value programmatically?

< paginate
   : page-count = " 1 "
   : click-handler = " functionName "
   : prev-text = " 'Prev' "
   : next-text = " 'Next' "
   : container-class = " 'className' " >
 </ paginate > 

点击事件如何返回当前pageNum?

clickHandler Function The method to call when page clicked. Use clicked page number as parameter.

但没写点击具体页码或上下页如何返回当前页码参数？

call this.$refs.paginate.selected from other component

#HTML
<template id="A">
  <paginate 
     :page-count="10"  
     :container-class="'pagination'"
     :click-handler="pageEvent">
  </paginate>
</template>

i'd wish to select page back to a number after getting callback, however the issue is my main method is calling from another component, the following way is not working when i called function abc().

var bus = new Vue();

Vue.component('A', {
  template: '#A',
  created{
    bus.$on('test', function () {
      this.$refs.paginate.selected = 5;
    });
  }
}

var vm = new Vue({
  methods: {
    abc(){
      axios.get('url').then((response) => {
         bus.$emit('test')
      });	
    }
  }
}

I tried to call it from the component itself and it works

Vue.component('A', {
  template: '#A',
  mounted(){
    this.$refs.paginate.selected = 2;
  }
}

Any helps?

documentation needed

Could you provide an example on how to apply the component to some page items?

I tried the following, but it is not possible to browse through pages of items:

`<paginate
			:page-count="3"
			:page-range="3"
			:margin-pages="2"
			
			:prev-text="\'Prev\'"
			:next-text="\'Next\'"
			:container-class="\'pagination\'"
			:page-class="\'items\'">
			
		</paginate>
		<div class="pagination">
		<div class="items">1</div>
			<div class="items">1</div>
			<div class="items">1</div>
			<div class="items">1</div>
			<div class="items">1</div>
			<div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div><div class="items">1</div>
		</div>`

What is wrong with it?

active-class in anchor tag

how to put active class in anchor tag? the default active-class is put in the li tag
I want to be like this

<ul class="pagination">
<li><a class="pagination-link is-current"> 1 </a> </li>
<li><a class="pagination-link"> 2 </a> </li>
<li><a class="pagination-link"> 3 </a> </li>
</ul>

请问如何在页面上直接调用该组件，不需要webpack打包的那种

If using as a subcomponent, scoped styling does not work

I have a parent component which uses Paginate as a subcomponent:

<script>
  import Paginate from 'vuejs-paginate/dist'

  export default {
    components: {
      Paginate
    },
    ...
</script>

Also in parent component:

<style lang="scss" scoped>
.page-item.active a {
  color: red;
}
</style>

This does not work when attempting to style pagination. Removing "scoped" does however:

<style lang="scss">
...
</style>

Looks like this is a Vue issue, but I hope this helps someone.

The css of 'scoped' can't be used in paginate

I need the scoped style, but it can not be used in paginate, is there any way?

Single File Components Style Scoped

First congratulations on your excellent work. Helps me a lot. I'm using Single File Component and the paginate works perfectly. However, if I want the CSS to be scoped I can't apply it on the paginate component. Is there any way to do this with CSS scoped?

Thanks again.

How I can change active page through methods?

I need to change the active page after I receive the data. How I can do it? Because it seems that v-model doesn't work this way

Prevent default

Hello, when I try to click on another page I am being redirected to home because of href='#'. And I have no access to the event object on the clickHandler. How can I call preventDefault on this?

Multiple paginate components in one view

I tried putting 2 <paginate/> at the top and bottom of my listing and using the same shared variables but when I click page 2 on the top one and scroll to the bottom one, it will still be one page behind.

动态设置page-count时，Vue报了warning

下面是我的代码
ProjectList.vue

<paginate
:page-count="all"
:page-range="3"
:margin-pages="2"
:click-handler="fetchProjectList"
:prev-text="'上一页'"
:next-text="'下一页'"
:container-class="'pagination'"
:page-class="'page-item'">
   </paginate>

//....省略


export default {
   data() {
     return {
       project_list: []
     }
   },
   mounted() {
     this.fetchProjectList();
   },
   methods: {
     fetchProjectList(page = 1){
       var self = this;
       axios.get('/api/project/list', {
         params: {
           page:page,
           pagesize:10
         }
       })
       .then(function (response) {
         self.project_list = response.data.data.list;
         this.all = 2;
         this.$refs.paginate.selected = 0;
       })
       .catch(function (error) {
          console.log(error);
       });
     }
   }
}

我这边想通过server返回的数量来设置这个page-count，参考了之前的issue，但是报了下面这个warning，虽然不是ERROR，看着很难受啊

Active pagination number +1

My pagination number is always +1 the current number, I don't know why.

I added this.$refs.paginate.selected = this.pagination.current_page - 1; in order to fix this.

next and prev button hide

Hey thanks for this component, but How Can I hide prev and next button when I have one item,

Cannot change CSS inside the pagination component !!

The problem:

I can only change the css of the pagination (class of the component). but I can't change the css of the li or a or a .active. I tried to put the css in a not scoped or a scoped component I even put it inside the body not scoped css file but it didn't work I added the properties pageClass and pageLinkClass and tried the same thing but still the sam result.

What should happend:

I should be able to change the style of the pagination component with this code:

<template>
                 .
                 .
                 .
                <div class="my-pagination col-md-offset-3 col-sm-offset-2 col-xs-offset-1">
                  <paginate
                    v-if="numberOfPages > 1"
                    :pageCount="numberOfPages"
                    :clickHandler="getPageData"
                    :prevText="'préc.'"
                    :nextText="'Suiv.'"
                    :containerClass="'pagination'"
                    :pageClass="'page-item'"
                    :pageLinkClass="'page-link-item'">
                  </paginate>
                </div>
                 .
                 .
                 .
</template>
<script>
</script>
...
<style>
                 .
                 .
                 .
    .pagination {
      margin: 5% 25%; // this works
      .page-item {
        .page-link-item .active {
          border-radius: 0px; // this don't work
          position: static !important; // this don't work
          background-color: #ed6528 !important; // this don't work
        }
      }
    }
                 .
                 .
                 .
</style>

Error 'TypeError: e._v is not a function' when trying to load component

I'm getting TypeError: e._v is not a function.

vue-js-paginate v. 1.8.0.
Vue v. 2.1.0.

Any toughts?

动态改变page-count、如何将页码激活状态重置为第一页?

动态改变page-count、如何将页码激活状态重置为第一页?

Clicking the '...' links should bring you to the next set of pages

Currently these links are considered disabled, but typically buttons like this will display the next set of page numbers.

Property Defaults

I suggest the following property defaults from Bootstrap 4:

<paginate 
    containerClass="pagination" 
    pageClass="page-item"
    pageLinkClass="page-link" 
    prevText="«" 
    prevClass="page-item" 
    prevLinkClass="page-link" 
    nextText="»" 
    nextClass="page-item"
    nextLinkClass="page-link"
</paginate>

No li around items

Is it possible to have an option to disable the li wrapping? When this happens, use the a tag for adding disabled to?

In semantic-ui, there is no li wrapper around the links. So this breaks the disabled that is added by your component.

Thanks!

Sync multiple vuejs-paginate components

What might be the best option to sync multiple vuejs-paginate components?

I want to add the pagination at the top and bottom of a table.

Thank you in advance,

Programmatic navigation

Hi, probably there's no option to click on page programmatically. Could you please provide such method?
Thanks for your work and looking forward to your reply.

Add 'Last' & 'First' buttons (Suggestion)

Just a suggestion.
Why not add 'Last' and 'First' button, and make them configurable, so the client could activate or deactivate them?

missing disabled-class

vuejs-paginate has a property to set custom active class. :active-class="paginate__item--active"
active-class | String | CSS class name for active page element. default: active
but in there is not way to set disabled. In my case i need it for prevContent and nextContent elements. something like this :disabled-class="paginate__item--disabled"

need to set pageNum default value

<paginate
  style="padding-left: 0px;"
  :page-count="5"
  :prev-text="'Prev'"
  :next-text="'Next'"
  :container-class="'ui small pagination menu'"
  :page-class="'item'"
  :prev-class="'item'"
  :next-class="'item'"
  :click-handler="currentPage">
</paginate>

currentPage(pageNum) {
    console.log('currentPage inside currentPage()', pageNum);
    if (pageNum == undefined || pageNum == null) {
        console.log('currentPage inside if', pageNum);
        return;
    }
    return pageNum;
}

i need the default pageNum value to be something, it changes only when I click (although it is on a click handler) I want it to be set something as it's used for calculation in below computed props

Page range is being added on both sides of selected page

Steps to reproduce:

<paginate :page-count="10" :margin-pages="0" :page-range="5" />

Click Next 10 times to skip through all pages.

Expected result:

The number of displayed page numbers adheres to the page-range configuration value. 5 page numbers should be visible at all times.

Actual result

On page 1, 5 pages are displayed.
On page 2, 6 pages are displayed.
On page 3, 7 pages are displayed.
On page 4, 8 pages are displayed.
On page 5, 9 pages are displayed.
On page 6, 9 pages are displayed.
On page 7, 8 pages are displayed.
On page 8, 7 pages are displayed.
On page 9, 6 pages are displayed.
On page 10, 5 pages are displayed.

PR with fix coming shortly.

safari page error

在safari浏览器里打开的时候，总是出现第一页然后最后一页，然后是第二页，最后是倒数第二页

如何实现在一个页面中有2个不同的分页，他们互不影响。

我是通过这种方式，新手求帮助!
Vue.component('paginate', VuejsPaginate);

pagination: new Vue({ el: '#casePagination', template: '<paginate :pageCount="totalPage" :containerClass="\'pagination\'" :pageClass ="\'page-item\'" :pageLinkClass ="\'page-link\'" :prevText="\'上一页\'" :nextText="\'下一页\'" ' + ':prevClass="\'page-item\'" :nextClass="\'page-item\'" :prevLinkClass="\'page-link\'" :nextLinkClass="\'page-link\'" :clickHandler="clickCallback"></paginate>', data: { totalPage: 0 }, methods: { clickCallback: function (page) { } } }),

2 paginations on the same page ( in sync)

2 or more pagination components on the same page don't get synced.
I have a page with 50 entries per page displayed and I want to have a pagination at the top and at the bottom ( to make it more accessible to the user, instead of having to scroll all the way to see the pagination links).
When I add 2 components, the page numbers are off ( they don't highlight the current page at the same time). Please help

Support Keyboard

Paginate doesn't respect keyboard navigation. It would be great to support accessibility. When I have a link focused hitting enter should trigger the pagination.

Prev and Next Button Should Be Disabled.

The Prev and Next button should be disabled when the page is 1 and last, respectively.

How to reset pagination when page-count changes

When I first init the pagination I pass this :page-count="nPages"

Now lets say that I browse 3 pages and make a new search and my server only returns 1 page. Then nPages will be set to 1 and the pagination components changes to only display 1 page.

But it will not mark the 1 page active and I can still click both prev and next.

How to reproduce:

Init the pagination with a dynamic page-count
:page-count="nPages"

Lets say that nPages is 3. So 3 pages will show up in the pagination.
Now click on page 3 and change nPages like:

$vm0.nPages = 1;

Update
Each time I post a new search to my server and and the result is not 0 I reset the pagination by:
this.$refs.paginate.selected = 0 It seems to work but I am not sure this is the right way to do it

Using Vue Events

Hi, instead of :clickHandler a custom Vue event can be used with .$emit such as @changed

ReferenceError: window is not defined when using server side render

Nuxt.js Error:

ReferenceError: window is not defined
    at /project/node_modules/vuejs-paginate/dist/index.js:1:3284
    at /home/project/node_modules/vuejs-paginate/dist/index.js:1:3216
    at e.exports (/home/project/node_modules/vuejs-paginate/dist/index.js:1:3502)
    at Object.<anonymous> (/home/project/node_modules/vuejs-paginate/dist/index.js:1:705)
    at t (/home/project/node_modules/vuejs-paginate/dist/index.js:1:336)
    at Object.<anonymous> (/home/project/node_modules/vuejs-paginate/dist/index.js:1:565)
    at t (/home/project/node_modules/vuejs-paginate/dist/index.js:1:336)
    at Object.<anonymous> (/home/project/node_modules/vuejs-paginate/dist/index.js:1:516)
    at t (/home/project/node_modules/vuejs-paginate/dist/index.js:1:336)
    at e.__esModule.default (/home/project/node_modules/vuejs-paginate/dist/index.js:1:423)
    at /home/project/node_modules/vuejs-paginate/dist/index.js:1:428
    at n (/home/project/node_modules/vuejs-paginate/dist/index.js:1:81)
    at Object.<anonymous> (/home/project/node_modules/vuejs-paginate/dist/index.js:1:207)
    at Module._compile (module.js:571:32)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/project/node_modules/babel-register/lib/node.js:152:7)

Can this be made server-side compatible by removing references to window and document objects?

Please see this issue that has just been updated:
#32

Next Page button stays active when page-count is 0

Next Page button stays active when page-count is 0 due to following logic
Original Code
lastPageSelected() { return this.selected === this.pageCount - 1 }
Potential fix
lastPageSelected() { return this.selected >= this.pageCount }

Add .babelrc file to .npmignore

Hi,

I am trying to use this for ssr. To work around #44, I import it like this:

import Paginate from 'vuejs-paginate/src/components/Paginate';

The problem is I also use babel in my project, and your .babelrc file is getting used by my babel.

If you add .babelrc to .npmignore that would fix this.

Thanks

How to init with specific page selected force-page not working

How do I init the pagination with eg page 3 selected?
I already tried force-page="3" but page still starts with page 1 being selected

Dots bug

Hey guys! I encountered such a problem that when combined, as in the example below, the button with dots is not added at the beginning, but on the last page everything is fine.

https://jsfiddle.net/MrGrump/u3u3nzns/175/

Broken when using Bootstrap 4

Functions ok but the UI is gone

Add prop for initially selected page

This is a useful component however I've found myself in a situation where I want to be able to start on a page that isn't the first page - would it be possible to add a prop to allow the initial page to be changed?

Thanks!

为何使用require.js加载js库无法使用？如图

No class for First page and last page

Instead of button, there should be a class to have custom icons for going to first page or last page.

add a prop for <li> and <a> class

Thank you for creating this project, I want to add bootstrap 4 pagination classes to the component and I have to pass class names to <li> and <a> too, can you please add optional props for those tags?

PS: or I can submit a pr if you think it is a good idea.