Laravel Previous & Next Navigation

To use a next and previous button to run through items you store in a database by ID you can use a simple controller, view update and take advantage of route model binding for the link generation.

Route

You need a named route to work with route model binding for your previous and next buttons here so do make sure you have one

Route::resource('Items', 'ItemsController');

Laravel automatically resolves Eloquent models defined in routes or controller actions whose type-hinted variable names match a route segment name.

So we need to type hint Items and that we do in the controller next

Controller

Here is our controller for the items where we use type hinting to connect the controller to the model and have the route model binding. The Item refers to the Item Model

public function edit(Item $item)
{
    $previous = Item::where('id', '<', $item->id)->max('id');
    $next = Item::where('id', '>', $item->id)->min('id');
    return view('admin.items.edit', [
        'Item' => $item,
    ])->with('previous', $previous)->with('next', $next);;
}

You also see the previous and next buttons defined here and attached to the view returned. We use where here using the Query Builder.

The first argument is the name of the column. The second argument is an operator, which can be any of the database’s supported operators. The third argument is the value to compare against the column’s value.

So choose the id column (default for route model binding too) and the operators are smaller than and larger than as you can see. As for the value to compare too, well we want it either to be smaller than current id or larger than it. And for that we can use max() or min()

View

Based on the entire setup we can now easily add the actual buttons. The CSS used shapes them as buttons so that is easy. The data in between {{}} is where we use the route model binding. We can just use the route blade view dotted style and refer to the previous or next variable and that is all you need to connect the routing to the Items Model.

@if($next)
<a href="{{ route( 'admin.items.edit', [$next] ) }}" class="btn btn-primary pull-right" style="margin:0 0 0 5px;">
    <span>
        next
    </span>
</a>
@endif
@if($previous)
<a href="{{ route( 'admin.items.edit', [$previous] ) }}" class="btn btn-primary pull-right" style="margin:0 0 0 5px;">
    <span>
        previous
    </span>
</a>
@endif

The reason for the if statements is to hide the previous button when you cannot go back further and to hide the next button when you cannot go forward anymore.

You do need to change the routes based on your setup of course. We based this view upon a backend setup where we edit items and quickly wan to move through them editing one after the other.

NB This post has been inspired by this Laracasts thread and developers there helping out.

Jasper Frumau

Jasper has been working with web frameworks and applications such as Laravel, Magento and his favorite CMS WordPress including Roots Trellis and Sage for more than a decade. He helps customers with web design and online marketing. Services provided are web design, ecommerce, SEO, content marketing. When Jasper is not coding, marketing a website, reading about the web or dreaming the internet of things he plays with his son, travels or run a few blocks.