sbkl-paginate

A vue plugin to set pagination with laravel (back-end), axios (ajax calls) and bulma (css framework).

Install via npm:

npm install sbkl-paginate

Example based on a list of contacts. Table made of the following fields:

• firstName
• lastName
• email
• message
• answered
• created_at

And assuming Vue, Axios and Bulma are properly installed.

1- Laravel setup

1.1- Set the routes

Routes in routes/web.php:

Route::post('contacts/delete', 'ContactsController@destroy');
Route::get('contacts/pagination/{pages}', 'ContactsController@paginate');
Route::get('contacts', 'ContactsController@index');

The first route enables to delete rows from the table. The second route return a json response of the contacts with pagination. The last route render the view.

1.2- Set the controller:

Controller in app/Http/Controllers/ContactsController.php

<?php

namespace App\Http\Controllers;

use App\Contact;
use App\Events\Contact\ContactCreated;
use Illuminate\Http\Request;

class ContactsController extends Controller
{

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view ('contacts.index');
    }

    /**
     * Paginate the list of resource dynamically.
     * @param $pages
     * @return mixed
     */
    public function paginate($pages)
    {
        $contacts = Contact::latest()->paginate($pages);

        return $contacts;
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param Request $contactIds
     * @return \Illuminate\Http\Response
     */
    public function destroy(Request $contactIds)
    {
        foreach ($contactIds->all() as $id)
        {
            Contact::find($id)->delete();
        }
    }
}

1.3- Set the blade template

View in resources/views/contacts/index.blade.php.

About the url:

• Used to access a specific page number within the pagination,
• Update the APP_URL variable in your environment file to make sure the base url is the right one,
• 'contacts/pagination' refers to the route created above to get the json response of the pagination.

@extends('layouts.app')

@section('content')

    <contacts-index url="{{ url('/contacts/pagination') }}"></contacts-index>

@endsection

2- Vue setup

2.1- Initial setup

app.js file located in resources/assets/js/app.js

window.Vue = require('vue'); //Require Vue framework

window.eventHub = new Vue(); //Setup of an event hub used by the plugin to update the data after the ajax calls.

window.axios = require('axios'); //Setup axios variable.

import sbklPaginate from 'sbkl-paginate'; //import the plugin.

Vue.use(sbklPaginate); //and use it

Vue.component('contacts-index', require('./components/contacts/index.vue')); //Register the Vue component file used in our blade template.

//Initialise the Vue instance.
const app = new Vue({
	el: '#app'
});	

2.2- 'contacts-index' components

located in resources/assets/js/components/contacts/index.vue

The resource variable is linked to the route created above.

The paginate component will make an ajax call to the resource url in order to get the data from the json response and assign them to the contacts variable.

In the template section, create the v-table component with the following properties:

• The url variable comes from the blade template created above.
• the table variable is the name of the table in your database. In our contact list example, the table name is 'contacts',
• the titles are the header of the table
• the fields are the fields of the contact model defined in the 'contacts' table and must be inserted in the same order than the titles to match.
• the size is the number of row you want per page. Refer to the $pages variable in the paginate function of your controller.

<template>

    <v-table
            :url="url"
            table="contacts"
            :titles="titles"
            :fields="fields"
            :size=size
    ></v-table>

</template>

<script>

    export default
    {
        props:['url'],
        data()
        {
            return{
                titles:['First name', 'Last name', 'Email', 'Received', 'Status'],
                fields:['firstName', 'lastName', 'email', 'created_at', 'answered'],
                size:10
            }
        }
    }

</script>

You can also merge fields if needed by adding & between the fields like so:

data()
{
    return{
        titles:['From', 'Email', 'Received', 'Status'],
        fields:['firstName&lastName', 'email', 'created_at', 'answered'],
    }
}

You will also notice the title related has been adapted as well.

The title 'From' is related to the fields 'firstName&lastName'.

3- CSS

The template is made of two main components using bulma classes:

<div class="container">

    <nav class="pagination"></nav>

    <table class="table"></table>

</div>

For pagination and table classes, you may refer to http://bulma.io documentation.