How can I paginate data in 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?

i think you should use github.com/niiknow/vue-datatables-net as it work with github.com/yajra/laravel-datatables laravel — Kamlesh Paul
– Kamlesh Paul, Commented Mar 17, 2021 at 7:20

Akshay Salunkhe · Accepted Answer · 2021-03-17 06:03:52Z

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

answered Mar 17, 2021 at 6:03

Akshay Salunkhe

364 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blue pine Over a year ago

Akshay Salunkhe, Thanks, by the way, When I click pagination button to change page, changePage function is called, will laravel get the only 10 results of $query->with([.........])->orderBy(.......)?

Akshay Salunkhe Over a year ago

no 10 is just for example. you can add however you want 10, 15.

Collectives™ on Stack Overflow

How can I paginate data in laravel&Vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related