Using Laravel pagination with Bootstrap-vue pagination

Question

Is it possible to use Laravel pagination with Bootstrap-vue pagination ?

I'm trying this:

<b-pagination-nav :link-gen="linkGen"></b-pagination-nav>

Default method of Bootstrap-vue:

linkGen (pageNum) {
  return `${pageNum}`
}

But it doesn't seem possible to set first/prev/next/last pages links that Laravel sends me:

current_page: (...)
data: (...)
first_page_url: (...)
from: (...)
last_page: (...)
last_page_url: (...)
next_page_url: (...)
path: (...)
per_page: (...)
prev_page_url: (...)
to: (...)
total: (...)

The first, last, next, prev buttons will use `linkGen` function to generate the link rendered in those buttons. — Troy Morehouse, Apr 27 '20 at 19:57
But these links won’t have the GET parameters necessary to retrieve data for other pages. Can I force it somehow to use links provided by Laravel links with my GET parameters ? — DevonDahon, Apr 27 '20 at 20:28
Currently, no... But will look into a way to pass the button type the link is being requested for, which will then be passed to the `linkGen` function. Although if the URL doesn't match the URL for the current page, the auto-detection of the current page may not work. — Troy Morehouse, Apr 27 '20 at 21:10

score 0 · Answer 1 · answered Dec 22 '21 at 10:38

I was able make b-pagination-nav work with Laravel's pagination informations.

<b-pagination-nav 
    @input="loadPage"
    :link-gen="linkGen" 
    :number-of-pages="laravelData.last_page"
    :limit="20"
    use-router></b-pagination-nav>

@input works when the user changes the page in the URL too.

data(){
    return {
      companies: null
      laravelData: null //used for pagination
    }
},

mounted(){
    this.loadPage(1);
},

methods: {
    loadPage(page){
      http.get('/companies?page=' + page)
      .then(data => {
        this.companies = data.data
        this.laravelData = data
      })
    },

    linkGen(pageNum) {
      return { path: `/companies?pages=${pageNum}` }
    }
}

Using Laravel pagination with Bootstrap-vue pagination

1 Answers1