如何在 laravel&Vue 中对数据进行分页？

Posted 2023-02-22

【中文标题】如何在 laravel&Vue 中对数据进行分页？

【英文标题】：How can I paginate data in laravel&Vue?

【发布时间】：2021-06-14 11:16:12

【问题描述】：

我正在使用 laravel 和 vuejs 制作网站。 我使用复杂的 Eloquent 查询从 DB 中获取数据，如下所示。

$query->with([
        'deviceAssignment.deviceSetting.sim',
        'deviceAssignment.deviceSetting.device.deviceType',
        'deviceSignal',
        'deviceAssignment.deviceSetting.deviceGroup',
        'deviceAssignment.deviceSetting.company',
        'deviceAssignment.deviceSetting.phones'])
        ->orderBy('created_at', 'desc')
        ->get();

我同时使用了几个表，那么这个数据量有点大，所以我想对这个数据进行分页。 我像这样将分页器放在 vue 组件的底部。

.......

<pager :items="histories" v-on:paginate="changePage" class="pager bottom_10 top_20 position_r"></pager>

而changePage函数如下；

methods: 
        changePage: function(page)
            location.href = "/history/setting?page=" + page;
        ,

在这种状态下，简单来说，我在第一部分将get()函数改为paginate()，实现分页。 我说的对吗？

【问题讨论】：

我认为你应该使用 github.com/niiknow/vue-datatables-net，因为它与 github.com/yajra/laravel-datatables laravel 一起使用

【参考方案1】：

对于分页使用paginate(10) 函数而不是get() 函数。

$query->with([
        'deviceAssignment.deviceSetting.sim',
        'deviceAssignment.deviceSetting.device.deviceType',
        'deviceSignal',
        'deviceAssignment.deviceSetting.deviceGroup',
        'deviceAssignment.deviceSetting.company',
        'deviceAssignment.deviceSetting.phones'])
        ->orderBy('created_at', 'desc')
        ->paginate(10);

https://laravel.com/docs/8.x/pagination#paginating-query-builder-results https://laravel.com/docs/8.x/pagination#paginating-eloquent-results

【讨论】：

Akshay Salunkhe，谢谢，顺便说一句，当我单击分页按钮更改页面时，调用 changePage 函数，laravel 会得到 $query->with([.... .....])->orderBy(.......)?

no 10 只是举例。您可以随意添加 10、15。