Skip to content

lionix-team/vue-laravel-paginex

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 

Laravel Pagination with VueJS (customizable)

vue-laravel-paginex will provide you ability to easily create pagination from Laravel Pagination object.

Installation

npm i vue-laravel-paginex

or

yarn add vue-laravel-paginex

Usage

First import the Pagination component inside your Vue component.

import Pagination from 'vue-laravel-paginex'

and define it

Vue.component('Pagination', Pagination)

Then you'll be able to use pagination component.

Example:

<Pagination :changePage="getData" :data="data"/>

:changePage prop will run the function ( in our case is getData()) when new page selected.

getData() function example with vue-resource.
methods: {
    getData(data) {
        this.$http.get('getDataEndpoint?page=' + data.page).then(response => {
            this.data = response.data
        })
    }
}

this.data object must be Laravel default or API Resource Pagination object.

Example:
{
    current_page: 1
    data: [{id: 25600, brand_id: 14, number: "47609-253286", name: "Mall of Africa", type: "Licensed",},]
    first_page_url: "http://example.com/getDataEndpoint?page=1"
    from: 1
    last_page: 10
    last_page_url: "http://example.com/getDataEndpoint?page=10"
    next_page_url: "http://example.com/getDataEndpoint?page=2"
    path: "http://example.com/getDataEndpoint"
    per_page: 20
    prev_page_url: null
    to: 20
    total: 200
}

or

{
    data: [
        {
            id: 1,
            name: "Eladio Schroeder Sr.",
            email: "therese28@example.com",
        },
        {
            id: 2,
            name: "Liliana Mayert",
            email: "evandervort@example.com",
        }
    ],
    links:{
        first: "http://example.com/pagination?page=1",
        last: "http://example.com/pagination?page=1",
        prev: null,
        next: null
    },
    meta:{
        current_page: 1,
        from: 1,
        last_page: 1,
        path: "http://example.com/pagination",
        per_page: 15,
        to: 10,
        total: 10
    }
}

Customizations

You can customize your pagination styles by overwriting default values. Available props for component:

Prop Name Default Value
containerClass pagination
buttonIcons false
prevButtonClass page-item
prevButtonText Prev
prevButtonIcon fa fa-chevron-left
nextButtonClass page-item
nextButtonText Next
nextButtonIcon fa fa-chevron-right
numberButtonClass page-item
numberClass page-link
numbersCountForShow 2
activeClass active
Example:

<Pagination :changePage="getData" :data="data" :containerClass="pagination-container"/>

You can use :options prop by passing options object into it.

Example:

You have to define here only props which you want to overwrite.

options:{
    containerClass: "pagination-container",
    prevButtonClass: "prev-button-class",
    nextButtonText: "Next Page"
    ...
}

<Pagination :changePage="getData" :data="data" :options="options"/>

Example:

You can set your own request params for request

params () {
    return {
       keyword:this.keyword
    }
}

<Pagination :changePage="getData" :data="data" :options="options" :requestParams="params"/>

Credits

About

Laravel Pagination with VueJS (customizable)

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages