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

Question

I am making site with laravel and vuejs. I use complex Eloquent query for getting data from DB as follows.

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

I use several tables at once, then this size of data is somewhat huge, so I want to paginate this data. I placed paginator in the bottom of vue component like this.

.......

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

And changePage function is as follows;

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

In this status, simply, I change get() function to paginate() in the first part to realize pagination. Am I right?

Answer 1

For Pagination use paginate(10) function instead of get() function.

$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