Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

vue-paginator

The simplest plugin to support your pagination need.

Setup

Just download this script in anywhere your project could find it.

Var VuePaginator = require('./vue-paginator.js')

Dependency

No, it doesn't depend any third-dependencies except Vue.js --- anyway, it is a plugin to Vue.js.

Suggestion

I think it is a simple tutorial to know how to write a plugin to vue.js. If it is possible, please read it.

If you wanted to use this script by npm, please mail me. I would learn some basic rules to use npm --- as you see, I'm not familiar with modern js.

Motivation

I know there are other vue.js plugins to paginate. Like vue-paginate.

It is a good project and have a good code style and the author is a good guy. I promise.

So why did I write this project?

Because when did I use vue-paginate, I found I could't use it very well. So I decided to write another to support my own job.

Maybe when you see this sentences, vue-paginate. could be strong enough. So you could try to use it.

Usage

modify from vue-paginate.

new Vue({
  el: '#app',
  data: {
    langs: ['PHP', 'JavaScript', 'HTML', 'CSS', 'Ruby', 'Python']
  }
});
<!-- data -->
<ul v-paginator:items="langs" :perp="4" >
  <li v-for="lang in langs">
    {{ lang }}
  </li>
</ul>

<!-- links -->
<ul>
  <li v-for="page in iterPage(pages())">
    <a @click="to(page)" href="#">
      {{ page }}
    </a>
  </li>
</ul>

:perp means perPageItems, pages is a property which I injected to the context. it is a list of pages number; to is a method to change the page.

if you want to use nextPage and prevPage, just modify the example like this:

    <a @click="prev()"  href="#">
    上一页
    </a>
    <a @click="next()" href="#">
    下一页
    </a>

It is also that I injected prev() method and next() method to context.

I also supplied you these methods or properties:

  • hasPrev()
  • hasNext()
  • originalList

If you want to toggle next/prev button when you clicked, you could write as this:

    <a @click="prev()" v-show="hasPrev()"  href="#">
    prev
    </a>
    <a @click="next()" v-show="hasNext()" href="#">
    next
    </a>

Maybe you prefer hasPrev/hasNext are properties rather than methods. I made some tests on these, and I found it is difficult to trigger watcher updating values So I had to abandon this idea.

Remember, you could use them even if products are got by async.

Issue me if any bugs found.

About

A basic vue.js plugin to paginate.

Resources

License

Releases

No releases published

Packages

No packages published