https://github.com/ryanwinchester/laravue-paginator

Vue component for Laravel Pagination
https://github.com/ryanwinchester/laravue-paginator

laravel laravel-pagination laravel-paginator vuejs

Last synced: 8 days ago
JSON representation

Vue component for Laravel Pagination

• Host: GitHub
• URL: https://github.com/ryanwinchester/laravue-paginator
• Owner: ryanwinchester
• Created: 2017-10-09T18:08:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-07T19:28:42.000Z (about 7 years ago)
• Last Synced: 2025-01-03T13:11:06.602Z (17 days ago)
• Topics: laravel, laravel-pagination, laravel-paginator, vuejs
• Language: Vue
• Size: 17.6 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Laravue Paginator

 [![npm](https://img.shields.io/npm/v/laravue-paginator.svg)](https://www.npmjs.com/package/laravue-paginator)

 [![npm](https://img.shields.io/npm/dt/laravue-paginator.svg)](https://github.com/ryanwinchester/laravue-paginator)

Bootstrap styled paginator Vue component for Laravel pagination

### Install

```

yarn add laravue-paginator

```

### Usage

```vue

  


    

      

        

          Breed

          Age

          Sex

        

        

          

            

              {{ dog.breed }}

              {{ dog.age }}

              {{ dog.sex }}

            

          

        

      

      

    

    
No dogs :(


  


  import LaravuePaginator from 'laravue-paginator'

  export default {

    components: {LaravuePaginator},

    data() {

      return {

        eventHub,

        dogs: [],

        pagination: null

      }

    },

    created() {

      this.fetch_dogs()

      this.eventHub.$on('page:updated', (event) => {

        this.fetch_dogs(event.page)

      })

    },

    computed: {

      req_params() {

        page: this.pagination.current_page,

        perPage: this.pagination.per_page,

      }

    },

    methods: {

      fetch_dogs(page = 1) {

        const params = Object.assign(this.req_params, {page})

        axios.get('/api/dogs', {params})

          .then(this.map_response_data)

          .catch((err) => {console.error(err)})

      },

      map_response_data({data: {data, ...pagination}}) {

        this.dogs = data

        this.pagination = pagination

      }

    }

  }

```

#### Props

- `pagination`: (required) The JSON version of Laravel pagination parameters.

- `plus-min-range`: (optional) The number of pages to show on each side of the current. defaults to `2`

- `change-event`: (optional) The name of the event to emit on page change. Defaults to `page:updated`

- `event-emitter`: (optional) the even emitter object (vue instance). Defaults to `eventHub`

`pagination` object should contain at least these properties:

```js

{

  current_page: 1,

  last_page: 2,

  per_page: 5,

  from: 1,

  to: 5,

  total: 9

}

```