Laravel

Laravel 11 JQuery Ajax Pagination Example

Maksud
December 30, 2024
4 min Read
806 Views

Introduction to Laravel 11 and JQuery Ajax Pagination

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.

Prerequisites

Before diving into the implementation, ensure you have the following:

A working installation of Laravel 11.
Basic knowledge of Laravel and JQuery.
Composer and Node.js installed on your development machine.

Setting Up the Laravel 11 Project

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

Adding Data and Models

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

Implementing JQuery Ajax Pagination

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>

Conclusion

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.

Laravel 11 JQuery Ajax Pagination Example

Introduction to Laravel 11 and JQuery Ajax Pagination

Prerequisites

Setting Up the Laravel 11 Project

Adding Data and Models

Implementing JQuery Ajax Pagination

Conclusion

Recent Posts

Categories

Tags

Get The latest Coding solutions.