This content originally appeared on DEV Community and was authored by Salma

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.

First Step Create route

routes/web.php

Route::get('/', 'TestController@index');

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'));
    }
}

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

in pagination links function we call that's custom file

{!! $users->links('pagination.custom') !!}

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;
    });

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

Hope this laravel custom pagination tutorial will help you.

This content originally appeared on DEV Community and was authored by Salma

Print Share Comment Cite Upload Translate Updates

APA

Salma | Sciencx (2021-10-08T21:26:23+00:00) Make Custom Pagination with laravel. Retrieved from https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/

MLA

" » Make Custom Pagination with laravel." Salma | Sciencx - Friday October 8, 2021, https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/

HARVARD

Salma | Sciencx Friday October 8, 2021 » Make Custom Pagination with laravel., viewed ,<https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/>

VANCOUVER

Salma | Sciencx - » Make Custom Pagination with laravel. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/

CHICAGO

" » Make Custom Pagination with laravel." Salma | Sciencx - Accessed . https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/

IEEE

" » Make Custom Pagination with laravel." Salma | Sciencx [Online]. Available: https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/. [Accessed: ]

rf:citation

» Make Custom Pagination with laravel | Salma | Sciencx | https://www.scien.cx/2021/10/08/make-custom-pagination-with-laravel/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Aloha There !

First Step Create route

routes/web.php

step 2 Create Controller

Step 4: Create Blade File

Related Posts