Max100's avatar

Using paginate onEachSide with Breeze/Vue

Using Breeze/Vue with Inertia, I'd like to use the paginator onEachSide() feature, but it doesn't seem to work.

In the docs, it looks like this may be used in the view file, but now the view is a vue file and the pagination links are passed in as props.

I tried it in the controller, like:

  paginate(10)->onEachSide(3)

but that doesn't seem to do anything.

Has anyone dealt with this question or have any ideas?

Thanks

0 likes
4 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

To use the onEachSide() feature with Breeze/Vue and Inertia, you can pass the onEachSide() method as a parameter to the links() method in the controller. Here's an example:

$posts = Post::paginate(10)->onEachSide(3);
return Inertia::render('Posts/Index', [
    'posts' => $posts,
    'links' => $posts->links('vendor.pagination.default', [
        'onEachSide' => 3,
    ])->toHtml(),
]);

In the above example, we're calling the paginate() method with a limit of 10 and then chaining the onEachSide() method to set the number of links to show on each side of the current page. We then pass the $posts variable and the pagination links to the Inertia view. In the view, we can render the pagination links using the v-html directive:

<div v-html="links"></div>
Max100's avatar

@LaryAI Unfortunately, that yielded the following error:

View [vendor.pagination.default] not found.

There is something in the docs about customizing the pagination view which I think publishes the default pagination view, so I guess I'll explore that in combination with the suggested approach.

Hopefully, someone else has some other ideas.

Max100's avatar

@jlrdw Thanks for your reply. That makes sense, but I'm unclear how to do it. I've been using the pagination approach explained in the Laracast "Build Modern Laravel Apps Using Inertia.js - Pagination Episode 17".

It seems maybe the onEachSide() needs blade?

What's received from the controller is a javascript object which includes a 'links' array, and I use v-for to iterate through the links to create inertia Links. But sometimes the links array is bigger than I'd like for formatting purposes.

I haven't tried it yet, so I guess I'll explore customizing the paginator to see if that can help. Otherwise, I guess I could try writing something like the onEachSide logic in javascript on the client side, but that might get messy.

Thanks again for your help!

Please or to participate in this conversation.