vue-laravel-table-pagination
:earth_africa: Installation
npm install --save vue-laravel-table-pagination
:wave: Usage
At the root of your project, just before creating your Vue application, import the vue-laravel-table-pagination
plug-in, and add it to the Vue global with the following code:
Example - main.js
import Vue from 'vue'
import Pagination from 'vue-laravel-table-pagination'
Vue.component('Pagination', Pagination)
### `App.vue`
<template>
<div>
<Pagination
:data="data"
@paginateTo="getPaginateData"
/>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
data: {
"current_page": 1,
"data": [
{
"id": 3,
"name": "Company List",
},
{
"id": 10,
"name": "Module List"
}
],
"first_page_url": "<your api>?page=1",
"from": 1,
"last_page": 5,
"last_page_url": "<your api>?page=5",
"next_page_url": "<your api>?page=2",
"path": "<your api>",
"per_page": 2,
"prev_page_url": null,
"to": 2,
"total": 10
}
}
},
methods:{
getPaginateData(){
var current_page = this.$router.currentRoute.query;
apiMethod(current_page).then((response_data) => {
this.data = response_data;
});
}
}
}
</script>
Dependencies
@babel/core: ^7.14.6@babel/preset-env: ^7.14.7@rollup/plugin-alias: ^3.1.2@rollup/plugin-babel: ^5.3.0@rollup/plugin-commonjs: ^14.0.0@rollup/plugin-node-resolve: ^9.0.0@rollup/plugin-replace: ^2.4.2@vue/cli-plugin-babel: ^4.5.13@vue/cli-service: ^4.5.13cross-env: ^7.0.3minimist: ^1.2.5rimraf: ^3.0.2rollup: ^2.52.8rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^5.1.9vue: ^2.6.14vue-template-compiler: ^2.6.14