diff --git a/README.md b/README.md
index a54caf4..51914f5 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,12 @@
# Vue.js Paginator [![CircleCI](https://circleci.com/gh/hootlex/vuejs-paginator.svg?style=shield&circle-token=:circle-ci-badge-token)](https://circleci.com/gh/hootlex/vuejs-paginator) [![npm downloads](https://img.shields.io/npm/dt/vuejs-paginator.svg)](https://www.npmjs.com/package/vuejs-paginator) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](LICENSE)
-> A Vue.js plugin to easily integrate pagination to your projects.
+> A Vue.js plugin to easily integrate pagination in your projects.
-VueJs Paginator is a simple but powerful plugin, since it gives you access on how to render the data, instead of using a predefined table.
+VueJs Paginator is a simple but powerful plugin since it gives you access on how to render the data, instead of using a predefined table.
-Just give it a variable where you want the returned data to be stored. Every time the user changes page, your variable will update immediately.
+![vue paginator preview](http://i.imgur.com/2jah1qt.gif)
The way you use it is similar to Laravel's paginator.
->Vuejs Paginator takes a `resource_url` and a `resource` empty variable and it fetches the data from the provided URL. When the call is done, it adds the returned data to the `resource` variable.
-
## Installation
### Through npm
``` bash
@@ -23,29 +21,37 @@ npm install vuejs-paginator --save-dev
```
## Usage
-Register VPaginator component inside your Vue instance.
+Use VPaginator in the HTML.
+```html
+
1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 -22 -23 -24 -25 -26 -27 -28 -29 -30 -31 -32 -33 -34 -35 -36 -37 -38 -39 -40 -41 -42 -43 -44 -45 -46 -47 -48 -49 -50 -51 -52 -53 -54 -55 -56 -57 -58 -59 -60 -61 -62 -63 -64 -65 -66 -67 -68 -69 -70 -71 -72 -73 -74 -75 -76 -77 -78 -79 -80 -81 -82 -83 -84 -85 | - - - - - - - - - - - - - - - - - - - - - - - - - - - -1× - - - - - - - - - - -4× - - - - - - - - -4× -4× - - - - - - - -2× -2× - - - -2× -2× -2× -2× - - -11× -11× -11× -24× - -11× - - - -4× - - - - - - - | // <template> -// <div class="v-paginator"> -// <button class="btn btn-default" @click="fetchData(prev_page_url)" -// :disabled="!prev_page_url"> -// Previous -// </button> -// <span>Page {{current_page}} of {{last_page}}</span> -// <button class="btn btn-default" @click="fetchData(next_page_url)" -// :disabled="!next_page_url">Next -// </button> -// </div> -// </template> -// -// <script> -export default { - props: { - resource: { - required: true, - twoWay: true - }, - resource_url: { - type: String, - required: true - }, - options: { - type: Object, - required: false, - default () { - return { - data: 'data', - current_page: 'current_page', - last_page: 'last_page', - next_page_url: 'next_page_url', - prev_page_url: 'prev_page_url' - } - } - } - }, - data () { - return { - current_page: '', - last_page: '', - next_page_url: '', - prev_page_url: '' - } - }, - methods: { - fetchData (pageUrl) { - pageUrl = pageUrl || this.resource_url - this.$http.get(pageUrl, {}, { headers: this.options.headers }) - .then(function (response) { - this.handleResponseData(response.data) - }).catch(function (response) { - console.log('Fetching data failed.', response) - }) - }, - handleResponseData (response) { - this.makePagination(response) - this.$set('resource', this.getNestedValue(response, this.options.data)) - }, - makePagination (data) { - // here we use response.data - this.current_page = this.getNestedValue(data, this.options.current_page) - this.last_page = this.getNestedValue(data, this.options.last_page) - this.next_page_url = this.getNestedValue(data, this.options.next_page_url) - this.prev_page_url = this.getNestedValue(data, this.options.prev_page_url) - }, - getNestedValue (obj, path) { - path = path.split('.') - let res = obj - for (let i = 0; i < path.length; i++) { - res = res[path[i]] - } - return res - } - }, - created () { - this.fetchData() - } -} -// </script> - -/* generated by vue-loader */ - - |
File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
---|---|---|---|---|---|---|---|---|---|
VPaginator.vue | -90% | -18/20 | -100% | -2/2 | -77.78% | -7/9 | -89.47% | -17/19 | -
File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
---|---|---|---|---|---|---|---|---|---|
src/ | -54.9% | -28/51 | -62.5% | -5/8 | -21.43% | -3/14 | -51.11% | -23/45 | -