使用 Laravel 分页和 Bootstrap-vue 分页

Posted 2023-03-10

【中文标题】使用 Laravel 分页和 Bootstrap-vue 分页

【英文标题】：Using Laravel pagination with Bootstrap-vue pagination

【发布时间】：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 不匹配，则当前页面的自动检测可能不起作用。

【参考方案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`