Laravel 5.3 - Customize pagination templates example from scratch

Today, I am going to tell you how to building and apply new custom paginator view in Laravel 5.3. Laravel 5.3 added new features and update for easily implement your own manual pagination blade template.

By Default Laravel 5.3 provide us very simple bootstrap pagination view. But if you are not using bootstrap and you want to change then you can simply change OR if you want to add new bootstrap pagination layout then you can do it.

In bellow example you can see how to create custom blade layout and use them. This example from scratch so you can simply implement it in your project or laravel 5.3 application. So, you can also see bellow preview of example pagination.

Preview:

Laravel 5.3 added some new things on pagination view files. Laravel 5.3 give us to simply change on existing default pagination layout also so, you can run bellow command and it will create some files for pagination view.

Ok, so first run bellow command:

php artisan vendor:publish --tag=laravel-pagination

After bellow command run you will get new folder "pagination" on views files(resources/views/vendor). In pagination folder you will get following files by default:

1)default.blade.php

2)bootstrap-4.blade.php

3)simple-bootstrap-4.blade.php

4)simple-default.blade.php

You can also use bellow blade template for pagination and also change on this files.

Step 1: Create New Table with Data

In first step, we are going to create new our own custom layout file from scratch so first we have to create new one table will some records.

In this example i created new table "tags" and with some

dummy data as like bellow screen shot.

tags table

Step 2: Add New Route

Ok, after created table and dummy data, we have to add new route for example so add bellow new "tags" route in web.php file.

routes/web.php

Route::get('tags', 'HomeController@tags');

Step 3: Add Controller Method

Ok, now we have to add new controller method "tags()" in your HomeController, so if you haven't created HomeController then you can create by following command put bellow code:

command for create controller

php artisan make:controller HomeController

app/Http/Controllers/HomeController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use DB;

class HomeController extends Controller
{

    public function tags()
    {
    	$tags = DB::table('tags')->paginate(7);
    	return view('tags',compact('tags'));
    }

}

Step 4: Create Blade File For Pagination

Ok, now we have to create new custom.blade.php file for our custom pagination template. In this file changed bootstrap class and also add new text for next and previous so it seems different layout for pagination layout.

so first i going to create blade file and put bellow code:

resources/views/vendor/pagination/custom.blade.php

@if ($paginator->hasPages())
    <ul class="pager">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="disabled"><span>← Previous</span></li>
        @else
            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">← Previous</a></li>
        @endif

        {{-- Pagination Elements --}}
        @foreach ($elements as $element)
            {{-- "Three Dots" Separator --}}
            @if (is_string($element))
                <li class="disabled"><span>{{ $element }}</span></li>
            @endif

            {{-- Array Of Links --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        <li class="active my-active"><span>{{ $page }}</span></li>
                    @else
                        <li><a href="{{ $url }}">{{ $page }}</a></li>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">Next →</a></li>
        @else
            <li class="disabled"><span>Next →</span></li>
        @endif
    </ul>
@endif

Step 5: Create New Blade File

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

resources/views/tags.blade.php

<!DOCTYPE html>
<html>
<head>
	<title>Laravel custom pagination template</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

	<style type="text/css">
		.my-active span{
			background-color: #5cb85c !important;
			color: white !important;
			border-color: #5cb85c !important;
		}
	</style>

	
</head>
<body>

<div class="container">

	<h1 class="text-primary">Laravel 5.3 - Customize pagination templates</h1>

	<table class="table table-bordered">
		<thead>
			<th>Id</th>
			<th>Name</th>
			<th>Creation Date</th>
			<th>Updated Date</th>
		</thead>
		<tbody>
			@foreach($tags as $key => $tag)
				<tr>
					<td>{{ ++$key }}</td>
					<td>{{ $tag->name }}</td>
					<td>{{ $tag->created_at }}</td>
					<td>{{ $tag->updated_at }}</td>
				</tr>
			@endforeach
		</tbody>
	</table>
</div>

{{ $tags->links('vendor.pagination.custom') }}

</body>
</html>

Ok, now we are ready to run this example, so you can check...

Maybe it can help you...