Laravel: Overwriting the Default Pagination System

by Ivica Jangelovski

5 min read

Explore each different Laravel custom pagination example and learn how you can implement pagination on your records along with performing customization.

As you may already know, Laravel is the most-widely used framework in the PHP developers community. It comes with many out-of-the-box features that allow every Laravel developer to accomplish rapid application development process.

Some of the best features include:

  • Security and Authentication Implementation
  • Validation of the HTTP Requests
  • Database Migration System
  • CLI with Artisan
  • Templating Engine (Blade)
  • Pagination
  • and more

Another thing that makes Laravel so attractive is the flexibility it provides for the developers.

Almost all the features are highly customizable and can be adjusted to fit your needs in different scenarios as per your requirements.

In this post, we'll explore pagination with Laravel. Personally, I believe it's one of the best Laravel features that comes right out of the box and that you can use with just a few lines of code.

Read on to learn how you can paginate in Laravel and pick up a few tips for customization.

Types of Laravel Paginations

There are two types of pagination methods that are currently supported by default for the Query Builder results and the Eloquent ORM queries. They include:

  • simplePaginate()
  • paginate()

The difference between these two is that the first one displays only the Prev and Next buttons for navigating through the results, while the second one also includes the page numbers in between.

If you want to manually create a pagination system for other types of results apart from the Query Builder and the Eloquent ORM, checkout this Laravel Manual Paginatior example.

Controller Example Method

<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
use App\Invoice;

class InvoicesController extends Controller
{
    public function index()
    {
        //We will place the results fetch in this method
    }
}

Assuming you have created a view index directory for the Invoices in views/invoices we'll fetch the results in the index method and send them to the blade view.

Paginating Query Builder Results

Using the paginate() method:

public function index()
{
    $invoices = DB::table('invoices')->paginate(10);
    
    return view('invoices.index', ['invoices' => $invoices]);
}

Using the simplePaginate() method:

public function index()
{
    $invoices = DB::table('invoices')->simplePaginate(10);
    
    return view('invoices.index', ['invoices' => $invoices]);
}

Paginating Eloquent Results

Using the paginate() method:

$invoices = App\Invoice::paginate(10);

Using the simplePaginate() method:

$invoices = App\Invoice::simplePaginate(10);

Important thing to note is that the paginate() and simplePaginate() methods should be called after all the operations and constraints you made over the query.

How to Laravel Render Pagination Results in the View

Only 1 line of code is necessary to be written in the view by default. So, in order to display the HTML that's generated from the paginating methods you should write:

{{ $invoices->links() }}

You may wrap this in nested HTML or place it wherever you want in your Laravel pagination Blade view. If you used the paginate() method, you'll notice that the custom pagination is rendered with links (or numbers + navigation buttons combo.

Customizing the Laravel Pagination HTML

The default Laravel installation is shipped with BootstrapCSS as a primary Laravel pagination CSS framework.

For this reason, the generated HTML for the pagination is Bootstrap compatible (as already noted in the docs).

However, not everyone wants to utilize this default behavior and Bootstrap generated HTML.

Some of you may want to use your custom HTML/CSS or any other CSS framework (like TaliwindCSS).

This is why the Laravel core provides a convenient way to reuse some of the existing HTML views for the pagination by getting them into your views folder and make changes over them.

The path for the Laravel pagination view core is the following:

/vendor/laravel/framework/src/Illuminate/Pagination/resources/views

As it's not recommended to make changes in the Laravel core code, you will need to "grab" this folder and copy it to your resources/views/vendor folder by running:

php artisan vendor:publish --tag=laravel-pagination

This command will automatically create the folder /resources/views/vendor/pagination.

If you open it, you'll notice a few blade files. We need the file named resources/views/vendor/pagination/bootstrap-4.blade.php because this is the one used by the paginate() method.

If you want to Laravel customize pagination or to customize the simple Paginate() method output you'll have to do it in the resources/views/vendor/pagination/simple-bootstrap-4.blade.php.

Now, whatever you change here will reflect in your original view and you are free to do Laravel custom pagination according to your needs.

Bonus Tip(s)

Some bonus tips about custom pagination in Laravel and the entire process we have addressed here include the fact that maybe you want to get rid of the files that are generated by default. Or, perhaps you want to assign another file to be responsible for your default Laravel custom pagination view.

All of this is possible, but you will need to inform the AppServiceProvider for this action by calling the new pagination views in the boot() method:

use Illuminate\Pagination\Paginator;

public function boot()
{
    Paginator::defaultView('your-pagination-view-name');

    Paginator::defaultSimpleView('your-pagination-view-name');
}

This will make your-pagination-view-name and your-pagination-view-name your default pagination views for paginate() and simplePaginate().

Another thing you might want to know is that the Laravel Paginator class has numerous methods that are used to manipulate your custom pagination Laravel.

You can check them all on the Laravel docs page for the Pagination Laravel. Try to make tweaks on the example from above to see how all of these methods are working.

Good luck with your Laravel pagination style!

Additional Reading: Using Corcel in Laravel to CRUD Wordpress Data

FAQs

Q: How does custom pagination affect performance?
Custom pagination can improve or worsen performance based on its implementation; efficient querying and data handling can enhance speed, while complex operations might slow it down.
Q: Can you integrate custom pagination with third-party front-end frameworks like React/ Vue.js?
Yes, custom pagination can be integrated with React or Vue.js by creating API endpoints in Laravel that return paginated data for use in these frameworks.
Q: How to maintain pagination state across page reloads or navigation?
Maintain pagination state by storing the current page in the URL parameters or leveraging local storage/session storage to preserve the state during reloads or navigation.
Ivica Jangelovski
Ivica Jangelovski
PHP Developer

Ivica has over six years of experience as a full-stack PHP developer. Always up for a challenge, he has worked with leading New York and London digital agencies across different industries. A fast learner and great team player, he's always willing to go beyond expectations to achieve a deadline or step up for the team.

Expertise
  • JavaScript
  • Vue.js
  • Wordpress
  • PHP
  • AJAX
  • LAMP
  • Bootstrap
  • Git
  • Laravel
  • MySQL
  • AngularJS
  • PHP
  • API Design
  • Wordpress
  • +9

Ready to start?

Get in touch or schedule a call.