[](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.
+
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 | -
| 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 -86 -87 -88 -89 -90 -91 -92 -93 -94 -95 -96 -97 -98 -99 | - - - - - - - - - - - - -1× - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - | // <template>
-// <div class="v-paginator">
-// <button class="btn btn-default" @click="fetchData(prev_page_url)" :disabled="!prev_page_url">
-// {{config.previous_button_text}}
-// </button>
-// <span>Page {{current_page}} of {{last_page}}</span>
-// <button class="btn btn-default" @click="fetchData(next_page_url)" :disabled="!next_page_url">
-// {{config.next_button_text}}
-// </button>
-// </div>
-// </template>
-
-// <script>
-import {utils} from './utils'
-export default {
- props: {
- resource: {
- required: true,
- twoWay: true
- },
- resource_url: {
- type: String,
- required: true
- },
- custom_template : '',
- options: {
- type: Object,
- required: false,
- default () {
- return {}
- }
- }
- },
- data () {
- return {
- current_page: '',
- last_page: '',
- next_page_url: '',
- prev_page_url: '',
- config: {
- remote_data: 'data',
- remote_current_page: 'current_page',
- remote_last_page: 'last_page',
- remote_next_page_url: 'next_page_url',
- remote_prev_page_url: 'prev_page_url',
- previous_button_text: 'Previous',
- next_button_text: 'Next'
- }
- }
- },
- watch: {
- 'resource_url': function() {
- this.fetchData()
- }
- },
- methods: {
- fetchData (pageUrl) {
- pageUrl = pageUrl || this.resource_url
- this.$http.get(pageUrl, {}, { headers: this.config.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', utils.getNestedValue(response, this.config.remote_data)),
- this.setPaginationDataGlobally()
- },
- makePagination (data) {
- this.current_page = utils.getNestedValue(data, this.config.remote_current_page)
- this.last_page = utils.getNestedValue(data, this.config.remote_last_page)
- this.next_page_url = utils.getNestedValue(data, this.config.remote_next_page_url)
- this.prev_page_url = utils.getNestedValue(data, this.config.remote_prev_page_url)
- },
- setPaginationDataGlobally(){
- try {
- VuePaginator.meta.current_page = this.current_page
- VuePaginator.meta.last_page = this.last_page
- VuePaginator.meta.next_page_url = this.next_page_url
- VuePaginator.meta.prev_page_url = this.prev_page_url
- }
- catch(err) {
- console.log('[VuePaginator] Global VuePaginator object not found. You will not have access to VuePaginator.meta data.')
- }
- },
- initConfig(){
- this.config = utils.merge_objects(this.config, this.options)
- }
- },
- created () {
- this.initConfig()
- this.fetchData()
- }
-}
-// </script>
-
- |
| File | -- | Statements | -- | Branches | -- | Functions | -- | Lines | -- |
|---|---|---|---|---|---|---|---|---|---|
| VPaginator.vue | -12% | -3/25 | -0% | -0/2 | -0% | -0/11 | -8.33% | -2/24 | -|
| index.js | -100% | -8/8 | -100% | -4/4 | -100% | -1/1 | -100% | -6/6 | -|
| utils.js | -94.44% | -17/18 | -50% | -1/2 | -100% | -2/2 | -100% | -15/15 | -
| 1 -2 -3 -4 -5 -6 -7 -8 -9 | 1× -1× - -1× -1× - -1× - - | import VPaginator from './VPaginator.vue'
-const VuePaginator = VPaginator
-
-VuePaginator.meta={}
-window.VuePaginator = VuePaginator
-
-module.exports = VuePaginator
-
- |
| 1 -2 -3 -4 -5 -6 -7 -8 -9 -10 -11 -12 -13 -14 -15 -16 -17 -18 -19 -20 -21 | 1× -1× -2× -2× -1× - - -1× -1× -1× -1× -1× -4× - -1× -1× - - -1× - - | const merge_objects = (obj1, obj2) => {
- let obj3 = {};
- for (let attrname in obj1) { obj3[attrname] = obj1[attrname]; }
- for (let attrname in obj2) { obj3[attrname] = obj2[attrname]; }
- return obj3;
-}
-
-const getNestedValue = (obj, path) => {
- let originalPath = path
- path = path.split('.')
- let res = obj
- for (let i = 0; i < path.length; i++) {
- res = res[path[i]]
- }
- Iif(typeof res == 'undefined') console.log(`[VuePaginator] Response doesn't contain key ${originalPath}!`)
- return res
-}
-
-export const utils = { merge_objects, getNestedValue }
-
- |