Hello developers! In this article, we'll see how to create AJAX pagination in laravel 10. When we have lots of data at that time we add pagination for data chunks and if we change the page it will reload the page every time. So, we'll learn how to perform without page refresh to create a pagination in laravel 10.
The simplest is by using the paginate method on the query builder or an Eloquent query. The paginate method automatically takes care of setting the query's "limit" and "offset" based on the current page being viewed by the user.
To install Laravel 10, execute the following command.
composer create-project --prefer-dist laravel/laravel laravel_10_ajax_pagination_example
Let's set up the database configuration in the .env file by specifying the database name, username, and password.
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_10_example
DB_USERNAME=root
DB_PASSWORD=root
Next, let's add routes to the web.php file. Copy and paste the following code into that file:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PaginationController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::controller(PaginationController::class)->group(function(){
Route::get('pagination', 'index');
Route::get('pagination/ajax', 'paginationAjax');
});
To create a PaginationController.php file, execute the following command in the terminal
php artisan make:controller PaginationController
app/Http/Controllers/PaginationControllers.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
class PaginationController extends Controller
{
function index()
{
$users = User::paginate(10);
return view('pagination', compact('users'));
}
function paginationAjax(Request $request)
{
if($request->ajax())
{
$users = User::paginate(10);
return view('user_pagination_data', compact('users'))->render();
}
}
}
?>
Let's create a pagination.blade.php file and insert the following HTML code into it. This file will contain a user table with jQuery AJAX calls for pagination.
resources/views/pagination.blade.php
<!DOCTYPE html>
<html>
<head>
<title>How to Create AJAX Pagination in Laravel 10 - Vidvatek</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.box{
width:600px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">How to Create AJAX Pagination in Laravel 10 - Vidvatek</h3>
<br />
<div id="user_table">
@include('user_pagination_data')
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(document).on('click', '.pagination a', function(event){
event.preventDefault();
var page = $(this).attr('href').split('page=')[1];
fetch_user_data(page);
});
function fetch_user_data(page)
{
$.ajax({
url:"/pagination/ajax?page="+page,
success:function(data)
{
$('#user_table').html(data);
}
});
}
});
</script>
resources/views/user_pagination_data.blade.php
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th width="10%">ID</th>
<th width="40%">Name</th>
<th width="50%">Email</th>
</tr>
@foreach($users as $user)
<tr>
<td>{{ $user->id }}</td>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
</tr>
@endforeach
</table>
{!! $users->links() !!}
</div>
To run the Laravel 10 jQuery AJAX pagination example without reloading, ensure all configurations and code implementations are correct, then execute the application.
php artisan serve
You might also like:
- Read Also: How to Upload Multiple Images in Laravel 10
- Read Also: Select2 Autocomplete Search Using Ajax in Laravel 10
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: AJAX CRUD Operations In Laravel 10: Step-by-Step Guide