DEV Community

Salma
Salma

Posted on

Make Custom Pagination with laravel

Aloha There !

In this tutorial i will discuss about Laravel pagination example. I am going to tell you how to building and apply new custom pagination view in Laravel 8 application.
Alt Text

First Step Create route

routes/web.php
Route::get('/', 'TestController@index');
Enter fullscreen mode Exit fullscreen mode

step 2 Create Controller

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index()
    {
        $users = \App\User::paginate(7);

        return view('welcome',compact('users'));
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Create Blade File

we can make a new file in our resources file and make pagaination.blade.php

and write this code

 @if ($paginator->lastPage() > 1)
    <select class="pagination">
        <option data-url="{{$paginator->url(1)}}" onclick="window.location.assign('{{ $paginator->url(1) }}')" {{ ($paginator->currentPage() == 1) ? 'selected' : '' }}>
            <a href="{{ $paginator->url(1) }}">Previous</a>
        </option>
        @for ($i = 1; $i <= $paginator->lastPage(); $i++)
            <option data-url="{{$paginator->url($i)}}"  onclick="window.location.assign('{{ $paginator->url($i) }}')" {{ ($paginator->currentPage() == $i) ? 'selected' : '' }}>
                <a href="{{ $paginator->url($i) }}">{{ $i }}</a>
            </option>
        @endfor
        <option  data-url="{{$paginator->url($paginator->currentPage()+1)}}"  onclick="window.location.assign('{{ $paginator->url($paginator->currentPage()+1) }}')" {{ ($paginator->currentPage() == $paginator->lastPage()) ? 'selected' : '' }}>
            <a href="{{ $paginator->url($paginator->currentPage()+1) }}" >Next</a>
        </option>
    </select>
@endif
Enter fullscreen mode Exit fullscreen mode

in pagination links function we call that's custom file

{!! $users->links('pagination.custom') !!} 
Enter fullscreen mode Exit fullscreen mode

to load the data depend on the url what select

    $('body').on('change', '.pagination', function () {
        var url = $(this).find(":selected").attr('data-url');
        window.location.href = url;
    });
Enter fullscreen mode Exit fullscreen mode

At last we have to create index.blade.php file and we will use our custom pagination template. So let's create index page and put bellow code on it.

@extends('layouts.app')
@push('style')
    <style type="text/css">
        .my-active span{
            background-color: #5cb85c !important;
            color: white !important;
            border-color: #5cb85c !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
@endpush
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">

                  <table class="table table-stripped">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Name</th>
                            <th>Email</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                        <tr>
                            <td>{{ $loop->index + 1 }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                        </tr>
                        @empty
                        <p>No user found!</p>
                        @endforelse
                    </tbody>
                  </table>
               {{ $users->links('pagination.custom') }}
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script>
        $('body').on('change', '.pagination', function () {
            var url = $(this).find(":selected").attr('data-url');
            window.location.href = url;
        });

    </script>
@endpush

Enter fullscreen mode Exit fullscreen mode

Hope this laravel custom pagination tutorial will help you.

Discussion (0)