Pagination is an essential feature for any application dealing with large datasets, ensuring data is displayed in manageable chunks to enhance user experience. Laravel, a popular PHP framework, simplifies this process with its powerful built-in pagination functionalities. Combining this with JQuery Ajax creates a seamless, interactive user experience by dynamically loading data without page refreshes. This article provides a step-by-step guide to implementing JQuery Ajax pagination in a Laravel 11 application.
Before diving into the implementation, ensure you have the following:
1. Create a New Laravel Project:
composer create-project --prefer-dist laravel/laravel laravel11-pagination-example
2. Configure the Database:
Update the `.env` file with your database credentials:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password
3. Run Migrations:
Create and migrate a sample data table.
php artisan make:migration create_items_table --create=items
php artisan migrate
1. Define the Model:
Generate an `Item` model.
php artisan make:model Item
2. Seed the Database:
Use a factory to populate the `items` table with sample data.
php artisan make:factory ItemFactory --model=Item
// Define the factory in database/factories/ItemFactory.php
// Example factory definition
public function definition()
{
return [
'name' => $this->faker->word,
'description' => $this->faker->sentence,
];
}
Run the seeder:
php artisan db:seed --class=ItemSeeder
1. Create a Controller:
php artisan make:controller ItemController
2. Fetch Data with Pagination:
Define the `index` method in `ItemController`.
public function index(Request $request)
{
if ($request->ajax()) {
$items = Item::paginate(10);
return view('items.pagination', compact('items'))->render();
}
$items = Item::paginate(10);
return view('items.index', compact('items'));
}
3. Set Up Routes:
Add a route to `web.php`.
Route::get('items', [ItemController::class, 'index']);
4. Create Blade Views:
- `resources/views/items/index.blade.php`
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 JQuery Ajax Pagination Example</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center mt-4">Laravel 11 JQuery Ajax Pagination Example</h2>
<div id="items-container">
@include('items.pagination')
</div>
</div>
<script type="text/javascript">
$(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: "/items?page=" + page,
success: function (data) {
$('#items-container').html(data);
}
});
}
});
</script>
</body>
</html>
- `resources/views/items/pagination.blade.php`
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
@foreach($items as $item)
<tr>
<td>{{ $item->id }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->description }}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $items->links() }}
</div>
Following this guide, you have successfully implemented JQuery Ajax pagination in a Laravel 11 application. This setup ensures a more dynamic and responsive user experience, loading data seamlessly without refreshing the entire page. Leveraging Laravel's robust backend capabilities with JQuery's flexibility, your application can handle large datasets efficiently.
Subscribe to the Email Newsletter