Paginate results with Vue.Js / Inertia.js and Laravel

Question

I'm trying to paginate data from Laravel in Vue.Js. I'm using Inertia.js as well.

In my Laravel Controller I have:

    $data['participants'] = User::with('groups')->select('id', 'name')->paginate(2);
    return inertia('Dashboard/Participants', $data);

This outputs my two users in a row well in Vue. I am also expecting the links object to use for pagination. I don't see this in my Vue props.

If I inspect my Vue props I have the following object:

participants:Object
 current_page:1
 data:Array[2]
 first_page_url:"http://localhost:3000/dashboard/participants?page=1"
 from:1
 last_page:51
 last_page_url:"http://localhost:3000/dashboard/participants?page=51"
 next_page_url:"http://localhost:3000/dashboard/participants?page=2"
 path:"http://localhost:3000/dashboard/participants"
 per_page:2
 prev_page_url:null
 to:2
 total:101

If I:

dd($data['participants']->links());

in the controller I can see:

Illuminate\View\View {#316 ▼
  #factory: Illuminate\View\Factory {#310 ▶}
  #engine: Facade\Ignition\Views\Engines\CompilerEngine {#328 ▶}
  #view: "pagination::bootstrap-4"
  #data: array:2 [▶]
  #path: "/Users/ejntaylor/Documents/Laravel/motional/vendor/laravel/framework/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php"
}

I have been looking at PingCRM for inspiration but without luck - I've referenced in the link. Help appreciated.

Same problem here. I going nowhere with Inertia. Have you found a solution? — No One
– No One, Commented Mar 19, 2021 at 6:54

ejntaylor · Accepted Answer · 2020-04-08 10:56:31Z

It would seem the default Laravel pagination does not work with Inertia.JS so you must head to your AppServiceProvider.php file and add the following to get pagination to work.

This is taken from PingCRM

 protected function registerLengthAwarePaginator()
{
    $this->app->bind(LengthAwarePaginator::class, function ($app, $values) {
        return new class(...array_values($values)) extends LengthAwarePaginator {
            public function only(...$attributes)
            {
                return $this->transform(function ($item) use ($attributes) {
                    return $item->only($attributes);
                });
            }

            public function transform($callback)
            {
                $this->items->transform($callback);

                return $this;
            }

            public function toArray()
            {
                return [
                    'data' => $this->items->toArray(),
                    'links' => $this->links(),
                ];
            }

            public function links($view = null, $data = [])
            {
                $this->appends(Request::all());

                $window = UrlWindow::make($this);

                $elements = array_filter([
                    $window['first'],
                    is_array($window['slider']) ? '...' : null,
                    $window['slider'],
                    is_array($window['last']) ? '...' : null,
                    $window['last'],
                ]);

                return Collection::make($elements)->flatMap(function ($item) {
                    if (is_array($item)) {
                        return Collection::make($item)->map(function ($url, $page) {
                            return [
                                'url' => $url,
                                'label' => $page,
                                'active' => $this->currentPage() === $page,
                            ];
                        });
                    } else {
                        return [
                            [
                                'url' => null,
                                'label' => '...',
                                'active' => false,
                            ],
                        ];
                    }
                })->prepend([
                    'url' => $this->previousPageUrl(),
                    'label' => 'Previous',
                    'active' => false,
                ])->push([
                    'url' => $this->nextPageUrl(),
                    'label' => 'Next',
                    'active' => false,
                ]);
            }
        };
    });
}

svnwa · Accepted Answer · 2021-03-21 23:26:52Z

I had a similar problem and noticed the basic links() wouldn't work with Inertia and Vue so i made a simple Vue component where I use the Paginator Object I get from the Inertia render method and it works very well for me without the ServiceProvider workaround.

I can just use

public function index()
{
    return Inertia::render('MyUserList',[
        'paginator' => User::paginate(10)
    ]);
}

as I normally would. Then i bind the paginator Object to my Vue Component so I can leverage it to create a basic Paginator component. This way I can use and reuse the <Paginator :paginator="paginator" /> anywhere I want.

<template>
    <Paginator :paginator="paginator" />
</template>

<script>
import Paginator from "@/Components/Paginator";
export default {
    props: {
            paginator: Object
        },
}
</script>

I also created a package so you can pull it in via composer if you want. See https://github.com/svnwa/InertiaVuePaginator for more Info and the "Components" folder for the paginator component i created. I hope it helps others in the future :)

Collectives™ on Stack Overflow

Paginate results with Vue.Js / Inertia.js and Laravel

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related