Part One: Creating a Custom Pagination View in Laravel

Update You can view the completed part two of this article by visiting Part Two: Creating a Custom Pagination View in Laravel

In this post we are going to look at building a custom paginator view in Laravel 4. There are quite a few posts are the Web about how to do this, but ours is going to be different! Ours is going to allow the user to enter the page number in a text box and jump to a specific page they have in mind. The end result will look like this:

The first thing we are going to want to do is make a new file in our Views folder. I named mine enterable.php and saved it just inside the views folder, so the path is views\enterable.php.

Before we go any further, let's make a small change to our configuration, so the paginator class will use our new view. Inside the config\view.php file, find the line that looks like this

1...
2 
3'pagination' => 'pagination::slider-3',
4 
5...

and change the pagination::slider-3 (or whatever its set to) to our new view name. In my case the changed line looks like this

1...
2 
3'pagination' => 'enterable',
4 
5...

After we have saved our changes, we can move on to the next part: implementing the view. Let's first decide exactly what we want to accomplish here. Our new pagination view should do the following things:

• *It should display clickable links, just like the default Laravel pagination view;
• It should also allow a user to enter a page number in a text box and jump to that page.

#Implementing the Pagination View

Okay, now that we know what we want to do, how do we do it? Well, since we need to clickable links anyways, we can just modify the slider-3 pagination view that ships with Laravel. This view looks like this:

1<?php
2    $presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
3?>
4 
5<?php if ($paginator->getLastPage() > 1): ?>
6    <ul class="pagination">
7        <?php echo $presenter->render(); ?>
8    </ul>
9<?php endif; ?>

We can just copy and paste that into our new file as a start. If we refresh any page that has pagination, it should look just like the default Laravel pagination, because it is. Okay, the next thing we need to do is provide a text box. Logically it should appear to the right of the list of links. In the above code, the <?php echo $presenter->render(); ?> line is what is producing the clickable links. Conveniently, the Bootstrap presenter puts each link in between <li></li> tags. So we can just add a new set afterwards so our code looks like this:

 1<?php
 2    $presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
 3?>
 4 
 5<?php if ($paginator->getLastPage() > 1): ?>
 6    <ul class="pagination">
 7        <?php echo $presenter->render(); ?>
 8        <li>
 9            <!-- some mystical code will go here -->
10        </li>
11    </ul>
12<?php endif; ?>

The paginator class works by grabbing a variable named page from the URL. So in order for our new view to work, we need to create a form, pass in the current page's URL and specify that the method is GET. That's simple enough:

 1<?php
 2    $presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
 3?>
 4 
 5<?php if ($paginator->getLastPage() > 1): ?>
 6    <ul class="pagination">
 7        <?php echo $presenter->render(); ?>
 8        <li>
 9        <?php
10            echo Form::open(array('url' => $paginator->getUrl(0), 'method' => 'GET'));
11        ?>
12            <!-- some more mystical code will go here -->
13        <?php echo Form::close(); ?>
14        </li>
15    </ul>
16<?php endif; ?>

What that change does is put a form inside of our <li></li> tags and sets the action of the form to the current URL. Pretty cool, huh? Now we need that pesky input box. The user should only be entering page numbers, so we will now take advantage of the number input type, so we can also set the min and max values of the input element. The complete code for the view is below:

 1<?php
 2    $presenter = new Illuminate\Pagination\BootstrapPresenter($paginator);
 3?>
 4 
 5<?php if ($paginator->getLastPage() > 1): ?>
 6    <ul class="pagination">
 7        <?php echo $presenter->render(); ?>
 8        <li>
 9            <?php
10                echo Form::open(array('url' => $paginator->getUrl(0), 'method' => 'GET'));
11            ?>
12            <input type="number" name="page" min="0" max="<?php echo $paginator->getLastPage(); ?>" value="<?php echo $paginator->getCurrentPage(); ?>" placeholder="Page #" class="form-control" style="width: 150px; float: left; margin-left: 20px;">
13            <?php echo Form::close(); ?>
14        </li>
15    </ul>
16<?php endif; ?>

Notice that the name of the input is page, since the paginator class looks for this request input. You can also see that we set the min value to 0, so users cannot enter negative page numbers. Why would they need to? Anyways, the max value is set to the last page number, so a user cannot go over it if they are using a modern browser that displays warnings. And finally, we set the default value to the current page number, to be nice and informative.

#Conclusion

Now we have a very simple pagination view that will display a text box to the user that lets them jump around pages if they know roughly where they want to be. This is a nice feature if the data set is very large, and there many, many pages and you don't necessarily want and infinite-scroll-like solution.

There are a few things to note. For one, I used inline-styles here. Ideally they should be broke out into their own stylesheet, or included in your project's style sheets. And secondly, if you are displaying a data set to the user that has been filtered with a GET request (for example, searching for all records for a name John) the this will not exactly work in that situation. We will cover how to get this to work in a part 2, which has yet to be written.

∎