In this tutorial you will learn about the Laravel 7 Ajax Pagination Example Tutorial and its application with practical example.
In this Laravel 7 Ajax Pagination Example Tutorial I’ll show you how to implement ajax pagination in laravel. In this tutorial you will learn to create ajax pagination in laravel project.
Laravel 7 Ajax Pagination Example Tutorial
- Step 1: Install Laravel New App
- Step 2: Add Database Details
- Step 3: Create Model and Migration
- Step 4: Add Routes
- Step 5: Create Controllers By Artisan
- Step 6: Create Blade Views
- Step 7: Run Development Server
Step 1: Install Laravel New App
First of all we need to create a fresh laravel project, download and install Laravel using the below command
1 |
composer create-project --prefer-dist laravel/laravel blog |
Step 2: Add Database Details
Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.
1 2 3 4 5 6 |
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
Now, in this step we will create model and migration file. Please run the following command:
1 |
php artisan nake:modal Post -m |
Navigate database/migrations/ and open create_posts_table.php file. Then update the following code into this file:
1 2 3 4 5 6 7 8 |
public function up() { Schema::create('posts', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('title'); $table->timestamps(); }); } |
Now, run the migration to create database table using following artisan command:
1 |
php artisan migrate |
Step 4: Add Routes
After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
1 |
Route::get('posts', 'PostController@index'); |
Step 5: Create Controllers by Artisan
Now, lets create a controller named PostController using command given below –
1 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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, we will create view/blade file. 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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
Now we are ready to run our example so lets start the development server using following artisan command –
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
1 |
http://localhost:8000/posts |