Navigate back to the homepage

laravel pagination with customization

Infinitbility
Laravel
October 11th, 2020 · 1 min read
laravel pagination with customization

Hello Friends,

Welcome To Infinitbility!

If you want to customize your pagination view and want to understand the flow of Laravel pagination then you are right place. For creating Pagination in Laravel You have to know the basics structure of MVC Pattern. For Custom Pagination added skip 5 pages example

Create Route for pagination view in web.php

1<?php
2
3use Illuminate\Support\Facades\Route;
4
5/*
6|--------------------------------------------------------------------------
7| Web Routes
8|--------------------------------------------------------------------------
9|
10| Here is where you can register web routes for your application. These
11| routes are loaded by the RouteServiceProvider within a group which
12| contains the "web" middleware group. Now create something great!
13|
14*/
15
16Route::get('/', function () {
17 return view('welcome');
18});
19
20Route::get('/users', '[email protected]');

Create UserController.php in Http/Controller folder

1<?php
2
3namespace App\Http\Controllers;
4
5use App\Http\Controllers\Controller;
6use App\User;
7use Illuminate\Http\Request;
8
9class UserController extends Controller
10{
11 /**
12 * Show the users with paginate.
13 *
14 * @param object $request
15 * @return View
16 */
17 public function users(Request $request)
18 {
19 $users = User::paginate(10);
20 return view('users', compact('users'));
21 }
22}

Create Users blade in resource/Views folder

1<!doctype html>
2<html lang="en">
3 <head>
4 <!-- Required meta tags -->
5 <meta charset="utf-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8 <!-- Bootstrap CSS -->
9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10
11 <title>Hello, world!</title>
12 </head>
13 <body>
14 <table class="table table-bordered table-dark">
15 <thead>
16 <tr>
17 <th scope="col">#</th>
18 <th scope="col">Avatar</th>
19 <th scope="col">Email</th>
20 <th scope="col">First Name</th>
21 <th scope="col">Last Name</th>
22 <th scope="col">Created On</th>
23 </tr>
24 </thead>
25 <tbody>
26 @foreach($users as $user)
27 <tr>
28 <th scope="row">{{ $user->id }}</th>
29 <td> <img src="{{ $user->avatar }}" width="25" height="25" /></td>
30 <td>{{ $user->email }}</td>
31 <td>{{ $user->first_name }}</td>
32 <td>{{ $user->last_name }}</td>
33 <td>{{ date('d M, Y', strtotime($user->created_at)) }}</td>
34 </tr>
35 @endforeach
36 </tbody>
37</table>
38
39<div>
40 <!-- For Default pagination user -->
41 <div>{{ $users->links() }}</div>
42
43 <!-- For Custom pagination User -->
44 <div>{{ $users->links('pagination') }}</div>
45</div>
46
47 <!-- Optional JavaScript -->
48 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
49 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
50 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
51 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
52 </body>
53</html>

Create pagination blade in the views folder

1@if($paginator->hasPages())
2 <nav>
3 <ul class="pagination pull-right">
4 {{-- Previous Page Link --}}
5 @if($paginator->currentPage() > 5)
6 <li class="page-item">
7 <a class="page-link" href="<?php echo $paginator->url( $paginator->currentPage() - 5 ); ?>" rel="prev" aria-label="&lsaquo; Skip 5"> &lsaquo; Skip 5 </a>
8 </li>
9 @endif
10 @if ($paginator->onFirstPage())
11 <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
12 <span class="page-link" aria-hidden="true">&lsaquo;</span>
13 </li>
14 @else
15 <li class="page-item">
16 <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
17 </li>
18 @endif
19
20 {{-- Pagination Elements --}}
21 @foreach ($elements as $element)
22 {{-- "Three Dots" Separator --}}
23 @if (is_string($element))
24 <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
25 @endif
26
27 {{-- Array Of Links --}}
28 @if (is_array($element))
29 @foreach ($element as $page => $url)
30 @if ($page == $paginator->currentPage())
31 <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
32 @else
33 <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
34 @endif
35 @endforeach
36 @endif
37 @endforeach
38
39 {{-- Next Page Link --}}
40 @if ($paginator->hasMorePages())
41 <li class="page-item">
42 <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
43 </li>
44 @else
45 <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
46 <span class="page-link" aria-hidden="true">&rsaquo;</span>
47 </li>
48 @endif
49 @if($paginator->lastPage() >= $paginator->currentPage()+5)
50 <li class="page-item">
51 <a class="page-link" href="{{ $paginator->url( $paginator->currentPage() + 5 ) }}" rel="prev" aria-label="Skip 5 &rsaquo;">Skip 5 &rsaquo;</a>
52 </li>
53 @endif
54 </ul>
55 </nav>
56@endif

Some useful pagination function in Laravel

  1. Get the number of items for the current page.

    1$results->count()
  2. Get the current page number.

    1$results->currentPage()
  3. Get the result number of the first item in the results.

    1$results->firstItem()
  4. Get the paginator options.

    1$results->getOptions()
  5. Create a range of pagination URLs.

    1$results->getUrlRange($start, $end)
  6. Determine if there are enough items to split into multiple pages.

    1$results->hasPages()
  7. Determine if there is more items in the data store.

    1$results->hasMorePages()
  8. Get the items for the current page.

    1$results->items()
  9. Get the result number of the last item in the results.

    1$results->lastItem()
  10. Get the page number of the last available page. (Not available when using simplePaginate).

    1$results->lastPage()
  11. Get the URL for the next page.

    1$results->nextPageUrl()
  12. Determine if the paginator is on the first page.

    1$results->onFirstPage()
  13. The number of items to be shown per page.

    1$results->perPage()
  14. Get the URL for the previous page.

    1$results->previousPageUrl()
  15. Determine the total number of matching items in the data store. (Not available when using simplePaginate).

    1$results->total()
  16. Get the URL for a given page number.

    1$results->url($page)
  17. Get the query string variable used to store the page.

    1$results->getPageName()
  18. Set the query string variable used to store the page.

    1$results->setPageName($name)

Laravel Pagination Response

1{
2 "total": 50,
3 "per_page": 15,
4 "current_page": 1,
5 "last_page": 4,
6 "first_page_url": "http://laravel.app?page=1",
7 "last_page_url": "http://laravel.app?page=4",
8 "next_page_url": "http://laravel.app?page=2",
9 "prev_page_url": null,
10 "path": "http://laravel.app",
11 "from": 1,
12 "to": 15,
13 "data":[
14 {
15 // Result Object
16 },
17 {
18 // Result Object
19 }
20 ]
21}

if you get help, please share post on your social network

More tutorial form Laravel

  1. Yajra issue after install in laravel
  2. Laravel call function from another class
  3. laravel pagination with customization
  4. How to solve page expired error in laravel for webhooks, ajax, and form
  5. Laravel Model
  6. Laravel Clear cache, config, view and Routes

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

More articles from Infinitbility

react-native-sqlite-storage examples of query

react-native-sqlite-storage examples of query

Examples of Query Uses In react-native-sqlite-storage.

October 11th, 2020 · 2 min read
How to align icon with text in react native

How to align icon with text in react native

align text with icon in react native in button, card, etc.

October 10th, 2020 · 1 min read
© 2020–2021 Infinitbility
Disclaimer
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]