How To Create AJAX Pagination In Laravel 9

Websolutionstuff | Jan-18-2023 | Categories : Laravel jQuery

In this article, we will see how to create ajax pagination in laravel 9. Here, we will learn how to create jquery ajax pagination in laravel 7, laravel 8, and laravel 9. Also, we will perform without a page refresh data will get. If you use simple pagination then it can reload the page every time. So, it will be time consuming.

Pagination can load chunks of data every time and it can help the webpage for protecting from crashing the page on loading large amounts of data. If you are use jquery ajax pagination then it will more flexible for loading the data without page refresh.

So let's see, ajax pagination in laravel 9, laravel 9 pagination without reload, pagination in laravel 8/9 using ajax, and laravel 9 jquery ajax pagination.

Step 1: Install Laravel 9 Application

Step2: Configure Database

Step 3: Create Route

Step 4: Create Controller

Step 5: Create View

Step 6: Run Laravel 9 Application

 

Step 1: Install Laravel 9 Application

In this step, we will install the laravel 9 application using the following command.

composer create-project --prefer-dist laravel/laravel laravel_9_ajax_pagination_example

 

Step2: Configure Database

Now, we will set up the database configuration to the .env file like database name, user name, and password.

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=laravel_9_pagination
DB_USERNAME=root
DB_PASSWORD=root

 

 

Step 3: Create Route

In this step, we will add routes to the web.php file. So, add the following code to 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');
});

 

Step 4: Create Controller

In this step, we will create a PaginationController.php file. So, add the following code to that file.

app/Http/Controllers/PaginationControllers.php

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;

class PaginationController extends Controller
{
    function index()
    {
        $data = User::paginate(5);
        return view('pagination', compact('data'));
    }

    function paginationAjax(Request $request)
    {
        if($request->ajax())
        {
            $data = User::paginate(5);
            return view('user_pagination_data', compact('data'))->render();
        }
    }
}

?>

 

 

Step 5: Create View

Now, we will create a pagination.blade.php file. So, add the following code to that file. In this file, we will add a user table and create a jquery ajax call for pagination.

resources/views/pagination.blade.php

<!DOCTYPE html>
<html>
	<head>
		<title>How To Create AJAX Pagination In Laravel 9 - Websolutionstuff</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 jQuery AJAX Pagination In Laravel 9 - Websolutionstuff</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($data as $row)
		<tr>
			<td>{{ $row->id }}</td>
			<td>{{ $row->name }}</td>
			<td>{{ $row->email }}</td>
		</tr>
		@endforeach
	</table>
	{!! $data->links() !!}
</div>

 

 

Step 6: Run Laravel 9 Application

Now, we will run the laravel 9 jquery ajax pagination application without reloading using the following command.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
How to Get Selected Checkbox Value in Array Using jQuery
How to Get Selected Checkbox V...

In this post we will see how to get selected checkbox value in array using jquery. Here i will give you some example to&...

Read More

May-24-2021

How to Downgrade PHP 8.2 to 8.1 in Ubuntu
How to Downgrade PHP 8.2 to 8....

Hey there, I recently found myself in a situation where I needed to downgrade my PHP version from 8.2 to 8.1 on my Ubunt...

Read More

Nov-01-2023

How To Remove Specific Item From Array In Javascript
How To Remove Specific Item Fr...

In this article, we will see how to remove a specific item from an array in javascript. We will use the indexOf() m...

Read More

Nov-03-2022

How To Open Datepicker Popup In Angular 15 Material
How To Open Datepicker Popup I...

In this tutorial, I will guide you through the process of opening the datepicker popup in the Angular 15 Material framew...

Read More

Jul-10-2023