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

【问题标题】：How can I paginate data in laravel&Vue?如何在 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 一起使用

标签： php laravel vue.js eloquent laravel-query-builder

【解决方案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。