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:
- 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, 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', 'PostController@index');
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.
