Home

Simple, customizable pagination view for Laravel

Laravel

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

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 and Cirrus UI. Perfect for developers looking to improve their Laravel application's pagination experience with minimal effort.

https://packagist.org/packages/ghabriel25/laravel-pagination-view

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/
2. Dark Mode (New feature!) 🚀

Table of contents

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

Requirement

Laravel version 10+

Installation

composer require ghabriel25/laravel-pagination-view

Usage

Note: Don't forget to include the necessary CSS files or link to the relevant CDN in your project to ensure proper styling!

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

Fomantic UI (Semantic UI)

Edit your App\Providers\AppServiceProvider

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        PaginationView::fomanticuiView();
    }
}

If you want to customize the view,

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

or

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

Bootstrap

Edit your App\Providers\AppServiceProvider

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        PaginationView::bootstrapView();
    }
}

If you want to customize the view,

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

or

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

Bulma CSS

Edit your App\Providers\AppServiceProvider

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        PaginationView::bulmaView();
    }
}

If you want to customize the view,

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

or

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

Cirrus UI

Edit your App\Providers\AppServiceProvider

<?php

namespace App\Providers;

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

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        PaginationView::cirrusView();
    }
}

If you want to customize the view,

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

or

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

---

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
    {
        PaginationView::fomanticuiView(true);
        // PaginationView::bootstrapView(true);
        // PaginationView::bulmaView(true);
        // PaginationView::cirrusView(true);
    }
}

Screenshots

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

Fomantic UI (Semantic UI)

Bootstrap

Bulma CSS

Cirrus UI

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!