使用 Laravel 分页和 Bootstrap-vue 分页答案

【问题标题】：Using Laravel pagination with Bootstrap-vue pagination使用 Laravel 分页和 Bootstrap-vue 分页
【发布时间】：2020-08-10 19:21:50
【问题描述】：

Laravel pagination 可以和Bootstrap-vue pagination 一起使用吗？

我正在尝试这个：

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

Bootstrap-vue 的默认方法：

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

但似乎无法设置 Laravel 发送给我的first/prev/next/last pages 链接：

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

【问题讨论】：

第一个、最后一个、下一个、上一个按钮将使用linkGen 函数生成在这些按钮中呈现的链接。
但是这些链接没有必要的 GET 参数来检索其他页面的数据。我可以强制它以某种方式使用 Laravel 链接提供的链接和我的 GET 参数吗？
目前，没有...但是将寻找一种方法来传递请求链接的按钮类型，然后将其传递给linkGen 函数。虽然如果 URL 与当前页面的 URL 不匹配，则当前页面的自动检测可能不起作用。

标签： laravel pagination bootstrap-vue

【解决方案1】：

我能够使 b-pagination-nav 与 Laravel 的分页信息一起工作。

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

@input 在用户更改 URL 中的页面时也起作用。

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}` }
    }
}

【讨论】：