how to create Pagination in Vue laravel table - laravel

Question

I'm newbie in vue.js in laravel. I have a array data that display in table in vue. I want to create pagination for every 15 data. how can I do this? Any idea ?
template in vue.
<tbody>
<tr v-for="booking in bookings">
<td>{{ booking.booking_number | formatBookingNumber }}</td>
<td>{{ booking.date }}</td>
<td>{{ booking.status }}</td>
<td>{{ booking.check_in_date }}</td>
<td>{{ booking.check_out_date }}</td>
<td>
</td>
</tr>
</tbody>
Vue.js
<script>
export default {
props: ['bookings'] ..................

Answer 1

Amendments and additions
In case you haven't implemented a REST endpoint I suggest doing it with Transformers. After that you may follow the next use case:
app/Transformer/BookingsTransformer.php
public function transform($booking) {
return [
'booking-id' => $booking->booking_id,
'booking-data' => $booking->booking_date,
'booking-status' => $booking->booking_status,
'checkin' => $booking->booking_checkin,
'checkout' => $booking->booking_checkout,
];
}
app/Http/Controllers/BookingsResourceController.php
use EllipseSynergie\ApiResponse\Contracts\Response;
use App\Models\Bookings;
use App\Transformer\BookingsTransformer;
class ImageController extends Controller
{
protected $response;
public function __construct(Response $response)
{
$this->response = $response;
}
public function index()
{
//Get dataset's items
$image = Bookings::paginate(10);
// Return a collection of $images
return $this->response->withPaginator($image, new BookingsTransformer());
}
app/Http/Controllers/BookingsController.php
use App\Models\Bookings;
use Illuminate\Http\Request;
class BookingsController extends Controller
{
public function index()
{
return view('reservations');
}
routes/api.php
Route::get('bookings-api','ImageController#index');
routes/web.php
Route::get('/Bookings','BookingsController#index','as' => 'reservations');
resources/views/reservations.blade.php
<div class="container" id='app'>
<reservation-list></reservation-list>
</div>
Meanwhile you have to install npm and a pagination package in your Laravel project:
npm install
npm install vuejs-paginate --save
npm run watch
resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component(
'image-list',
require('./components/Bookings.vue')
);
Vue.component('paginate', require('vuejs-paginate'));
const app = new Vue({
el: '#app'
})
resources/assets/js/Components/Bookings.vue
<template>
<tbody>
<tr v-for="booking in bookings">
<td>{{ booking.booking_number | formatBookingNumber }}</td>
<td>{{ booking.date }}</td>
<td>{{ booking.status }}</td>
<td>{{ booking.check_in_date }}</td>
<td>{{ booking.check_out_date }}</td>
</tr>
</tbody>
<div class="centered">
<paginate
:page-count="pageCount"
:margin-pages="2"
:page-range="4"
:initial-page="0"
:container-class="'pagination'"
:click-handler="fetch"
:prev-text="'Prev'"
:next-text="'Next'"
></paginate>
</div>
</template>
<script>
export default {
data() {
return {
bookings: [],
endpoint: 'api/bookings-api'
};
},
created() {
this.fetch();
},
methods: {
fetch(page = 1) {
axios.get(this.endpoint + page)
.then(({data}) => {
this.dataset = data.data;
this.pageCount = data.meta.pagination.total_pages;
});
},
}
}
</script>
Hope it helped

Answer 2

you can try Vue Datatable package for this:
In your vue laravel application, you need to run below command just:
npm install --save vue-good-table
For more check this link:
Vue Laravel Tutorial Part 7 – Datatables

Answer 3

I am going to show you how to do it in simple way.Of course you need to change or add code to make this works in your app.Just try to understand the logic.
Vue.js component:
<template>
.....//here supposed to have more code
<tbody>
<tr v-for="booking in bookings">
<td>{{ booking.booking_number | formatBookingNumber }}</td>
<td>{{ booking.date }}</td>
<td>{{ booking.status }}</td>
<td>{{ booking.check_in_date }}</td>
<td>{{ booking.check_out_date }}</td>
<td>
</td>
</tr>
</tbody>
...
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
bookings: [],
page: 1, //change the page regarding your next and previous pagination button
rowsPerPage: 15,
totalItems: 0
.....
}
},
created () {
axios.get('/bookings', {
params: {
page: this.page,
rowsPerPage: this.rowsPerPage
}
})
.then(response => {
this.bookings = response.data.bookings
this.totalItems = response.data.totalItems
})
}
}
</script>
In Laravel routes/api.php
Route::get('/bookings','ControllerName#controllerFunctionName');
Then in your function,in your Controller do the following:
$page = $request->get('page');
$rowsPerPage = $request->get('rowsPerPage');
$skip = ($page - 1) * $rowsPerPage;
$bookings = YouBookingsModel::select(here put your query)->skip($skip)->take($rowsPerPage)->get();
$bookingsCount = YouBookingsModel::all()->count();
return response()->json([
"bookings" => $bookings,
"totalItems" => $bookingsCount
], 200);
Note that you have to made it in your own. But also consider using a material frameworks. I am using Vuetify which is awesome!!And there go to dataTables and you can use your table with pagination in easy and vuetiful way