Simple, customizable pagination view for Laravel

Note

By default, the views rendered to display the pagination links are compatible with the Tailwind CSS framework.

reference: https://laravel.com/docs/12.x/pagination#customizing-the-pagination-view

This package enhances Laravel's default pagination by providing additional features and customizable views. Designed to be lightweight and SEO-friendly, it integrates seamlessly with Fomantic UI, Bootstrap, Bulma CSS, Cirrus UI and UIkit. Perfect for developers looking to improve their Laravel application's pagination experience with minimal effort.

Features

1. Laravel pagination view template using:
   • Fomantic UI (Semantic UI) https://fomantic-ui.com/
   • Bootstrap https://getbootstrap.com/
   • Bulma CSS https://bulma.io/
   • Cirrus UI https://cirrus-ui.com/
   • UIkit https://getuikit.com/
2. Dark Mode (New feature!) 🚀

Table of contents

1. Requirement
2. Installation
3. Usage
4. Publishing Views
   • Fomantic UI (Semantic UI)
   • Bootstrap
   • Bulma CSS
   • Cirrus UI
   • UIkit
5. Initialization
6. Screenshots
   • Fomantic UI (Semantic UI)
   • Bootstrap
   • Bulma CSS
   • Cirrus UI
   • UIkit

Requirement

Laravel version 10+

Installation

composer require ghabriel25/laravel-pagination-view

Usage

Important

• Don't forget to include the necessary CSS files or link to the relevant CDN in your project to ensure proper styling!
• Please ensure you are using the latest or a compatible version of the CSS framework in your project.

Edit your App\Providers\AppServiceProvider.php

<?php

namespace App\Providers;

use Ghabriel\PaginationView\PaginationView;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        // USE ONLY ONE OF THESE BASED ON YOUR CSS FRAMEWORK

        // Fomantic UI (Semantic UI)
        PaginationView::fomanticuiView();

        // Bootstrap
        PaginationView::bootstrapView();

        // Bulma CSS
        PaginationView::bulmaView();

        // Cirrus UI
        PaginationView::cirrusView();

        // UIkit
        PaginationView::uikitView();
    }
}

Publishing Views (Optional)

Tip

All published views are located in resources/views/vendor/pagination

Follow this step only if you want to customize the view.

Fomantic UI (Semantic UI)

php artisan vendor:publish --provider=Ghabriel\PaginationView\PaginationViewServiceProvider --tag=pagination-view-fomanticui

or

php artisan vendor:publish --tag=pagination-view-fomanticui

Bootstrap

php artisan vendor:publish --provider=Ghabriel\PaginationView\PaginationViewServiceProvider --tag=pagination-view-bootstrap

or

php artisan vendor:publish --tag=pagination-view-bootstrap

Bulma CSS

php artisan vendor:publish --provider=Ghabriel\PaginationView\PaginationViewServiceProvider --tag=pagination-view-bulma

or

php artisan vendor:publish --tag=pagination-view-bulma

Cirrus UI

php artisan vendor:publish --provider=Ghabriel\PaginationView\PaginationViewServiceProvider --tag=pagination-view-cirrus

or

php artisan vendor:publish --tag=pagination-view-cirrus

UIkit

php artisan vendor:publish --provider=Ghabriel\PaginationView\PaginationViewServiceProvider --tag=pagination-view-uikit

or

php artisan vendor:publish --tag=pagination-view-uikit

---

Publish All Views

php artisan vendor:publish --provider=Ghabriel\PaginationView\PaginationViewServiceProvider --tag=pagination-view-all

or

php artisan vendor:publish --tag=pagination-view-all

Initialization

Example:

<?php

use App\Models\User;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
  return view('welcome', [
    'users' => User::paginate(10)
    // or 'users' => User::simplePaginate(10)
  ]);
});

In welcome.blade.php

<ul>
  @foreach($users as $user)
    <li>{{ $user->name }}</li>
  @endforeach
</ul>
{{ $users->links() }}
{{-- or {{ $users->onEachSide(1)->links() }} --}}

Dark Mode

To enable dark mode, simply pass boolean true as parameter

<?php

namespace App\Providers;

use Ghabriel\PaginationView\PaginationView;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        // Fomantic UI (Semantic UI)
        PaginationView::fomanticuiView(true);

        // Bootstrap
        PaginationView::bootstrapView(true);

        // Bulma CSS
        PaginationView::bulmaView(true);

        // Cirrus UI
        PaginationView::cirrusView(true);

        // UIkit
        PaginationView::uikitView(true);
    }
}

Screenshots

Here are the screenshot for paginate() and simplePaginate()

Fomantic UI (Semantic UI)

Bootstrap

Bulma CSS

Cirrus UI

UIkit

Contributing

Feel free to suggest changes, ask for new features or fix bugs yourself. We're sure there are still a lot of improvements that could be made, and we would be very happy to merge useful pull requests. Thanks!