Pagination refers to the content of a document that is divided into multiple pages. whenever we have one long page then we divide it by many pages. however, laravel provides pagination constructs such as paginate (), count () and link (). we just use this functionality.

You can easily create ajax pagination in Laravel from scratch step by step.

  • Step 1: Install Laravel 7
  • Step 2: Create routes
  • Step 3: Create UsersController
  • Step 4: Create a Blade File
  • Step 5: Launch our Laravel Application

Step 1: Install Laravel 7

To install laravel 7: first open the Prompt command and go to xampp htdocs directory then using command Prompt. then use the command below.

composer create-project --prefer-dist laravel/laravel laravel7_ajax_pagination


Step 2: Create Routes

Add the following route code in the routes/web.php file.

<?php
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
*/ 
Route::get('pagination', 'UsersController@index');
Route::get('get_ajax_data', 'UsersController@get_ajax_data');
?>


Step 3: Create UsersController

Here in this step, we will create the UsersController and index method. after then we will return the limit data for view file. 

You can use the below command use for create a controller.

php artisan make:controller UsersController

app/Http/Controllers/UsersController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppUser;

class UsersController extends Controller {

    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index() {
        $data = User::paginate(5);
        return view('pagination', compact('data'));
    }

    function get_ajax_data(Request $request) {
        if ($request->ajax()) {
            $data = User::paginate(5);
            return view('pagination_data', compact('data'))->render();
        }
    }

?>


Step 4: Create Blade File

Finally, We will create pagination.blade.php and pagination_data.blade.php in the "Resources / View /" folder directory and paste the code below.


resources/views/pagination.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel 7 Ajax Pagination Tutorial</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div id="table_data">
                @include('pagination_data')
            </div>
        </div>
    </body>  
    <script>
        $(document).ready(function() {

            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                var page = $(this).attr('href').split('page=')[1];
                fetch_data(page);
            });

            function fetch_data(page)
            {
                $.ajax({
                    url: "get_ajax_data?page=" + page,
                    success: function(data)
                    {
                        $('#table_data').html(data);
                    }
                });
            }

        });
    </script>
</html>


resources/views/pagination_data.blade.php

<div class="row">
    <div class="col-lg-12">

        <table class="table table-bordered" id="laravel">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Created at</th>
                </tr>
            </thead>
            <tbody>
                @if(!empty($data) && $data->count())
                @foreach($data as $user)
                <tr>
                    <td>{{ $user->id }}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>{{ date('d m Y', strtotime($user->created_at)) }}</td>
                </tr>
                @endforeach
                @else
                <tr>
                    <td colspan="4">No data found.</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
</div> 
<div class="row">  
    <div class="col-lg-12">
        {!! $data->links() !!}
    </div>
</div>

Step 5: Run Our Laravel Application

We can start the server and run this example using the below command.

php artisan serve