Laravel 7 Ajax Pagination Example Tutorial

Laravel 7 Ajax Pagination Example Tutorial

In this tutorial, you will learn how to implement laravel pagination apps using jQuery ajax.

Sometimes, you want to render data on list without reloading the whole web page. At that time, you can use laravel ajax pagination.

This tutorial will guide you from scratch on how to build laravel ajax pagination apps with example.

Laravel Ajax Pagination Example

Follow the below steps and implement laravel jQuery ajax pagination apps:

  1. Step 1: Install Laravel New App
  2. Step 2: Add Database Details
  3. Step 3: Create Model and Migration
  4. Step 4: Add Routes
  5. Step 5: Create Controllers By Artisan
  6. Step 6: Create Blade Views
  7. Step 7: Run Development Server

Step 1: Install Laravel New App

First of all, Open your terminal and run the following command to download or install laravel fresh new setup:

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

Step 2: Add Database Details

After that, open “.env” file and update the database name, username, and password in the env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Step 3: Create Modal and Migration

In this step, you need to create post table migration and create Post Modal by using the following command:

php artisan nake:modal Post -m

Navigate database/migrations/ and open create_posts_table.php file. Then update the following code into this file:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->bigIncrements('id');
        $table->string('title');
        $table->timestamps();
    });
}

Now run the following command

php artisan migrate

Step 4: Add Routes

Next step, Navigate to “routes/web.php” file and add the following routes into your web.php file:

Route::get('posts', '[email protected]');

Step 5: Create Controllers by Artisan

Next step, open your terminal and run the following command:

php artisan make:controller PostController 

This command will create PostController by the artisan command.

Next, Navigate to app/http/controller and open PostController.php.Then update the following methods into your controller file:

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class PostController extends Controller
{
    public function index(Request $request)
    {
        $posts = DB::table('posts')->orderBy('id', 'DESC')->paginate(3);
        if ($request->ajax()) {
            return view('load_posts_data', compact('posts'));
        }
        return view('posts', compact('posts'));
    }
}}

Step 6: Create Blade Views

In this step, you need to create 2 blade views file for rendering data on it. So navigate to resources/views folder and create the blade view as following:

Create first file name posts.blade.php and update the following code into it:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel Pagination with jQuery Ajax Request</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="container" style="max-width: 700px;">
    <div class="text-center" style="margin: 20px 0px 20px 0px;">
        <span class="text-secondary">Laravel Pagination with jQuery Ajax Request</span>
    </div>
    @if (count($posts) > 0)
        <section class="posts">
            @include('load_posts_data')
        </section>
    @else
        No data found :(
    @endif
</div>
<script type="text/javascript">
    $(function () {
        $('body').on('click', '.pagination a', function (e) {
            e.preventDefault();
            $('#load').append('<img style="position: absolute; left: 0; top: 0; z-index: 10000;" src="https://i.imgur.com/v3KWF05.gif />');
            var url = $(this).attr('href');
            window.history.pushState("", "", url);
            loadPosts(url);
        });
        function loadPosts(url) {
            $.ajax({
                url: url
            }).done(function (data) {
                $('.posts').html(data);
            }).fail(function () {
                console.log("Failed to load data!");
            });
        }
    });
</script>
</body>
</html>

After that, create a new blade view file that named load_posts_data.blade.php and update the following code into it:

<div id="load" style="position: relative;">
    <table class="table table-bordered">
        <thead class="thead-light">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Title</th>
        </tr>
        </thead>
        <tbody>
        @foreach($posts as $post)
            <tr>
                <td width="50px">
                {{$post->id}}</th>
                <td>{{ ucwords($post->title) }}</td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>
{!! $posts->render() !!}

Step 7: Run Development Server

In this step, use the following php artisan serve command to start your server locally:

php artisan serve
http://localhost:8000/posts

Conclusion

In this tutorial, you have learned how to use ajax pagination in laravel apps.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Livewire, Codeigniter, Vue JS, Angular JS, React Js, WordPress, and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *