Make Custom Pagination with laravel
Tags: php, tutorial, laravel
Published: 2021-10-08 21:26:23

#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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m3sh651qyjmof7n49v62.png)
##First Step Create route
 
######routes/web.php
```<?PHP
Route::get('/', 'TestController@index');
```

###step 2 Create Controller 

```<?PHP
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
 
```<?PHP
 @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 
```<?PHP
{!! $users->links('pagination.custom') !!} 
```
to load the data depend on the url what select 
<script>
        $('body').on('change', '.pagination', function () {
            var url = $(this).find(":selected").attr('data-url');
            window.location.href = url;
        });

    </script>

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.


```<?PHP 
@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.