Laravel 10 Create AJAX Pagination Example

Websolutionstuff | Apr-17-2023 | Categories : Laravel PHP jQuery

In this article, we will see laravel 10 create an ajax pagination example. Here, we will learn about how to create ajax pagination in laravel 10. 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 and it will take more time to load the page.

There are several ways to paginate items. 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.

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 using jquery ajax pagination then it will more flexible for loading the data without page refresh.

So let's see, how to create pagination with ajax in laravel 10, laravel 10 pagination without reload, laravel 10 ajax pagination, laravel 10 custom pagination, and laravel 10 jquery ajax pagination example.

Step 1: Install Laravel 10

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

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

 

Step 2: 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_10_example
DB_USERNAME=root
DB_PASSWORD=root

 

 

Step 3: Create Route

Then 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 using the following command. So, the following command to 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();
        }
    }
}

?>

 

 

Step 5: Create Blade File

Now, we will create a pagination.blade.php file. So, add the following HTML 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>Laravel 10 Create AJAX Pagination Example - 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">Laravel 10 Create AJAX Pagination Example - 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($users as $user)
		<tr>
			<td>{{ $user->id }}</td>
			<td>{{ $user->name }}</td>
			<td>{{ $user->email }}</td>
		</tr>
		@endforeach
	</table>
	{!! $users->links() !!}
</div>

 

 

Step 6: Run Laravel 10 Application

Now, we will run the laravel 10 jquery ajax pagination example without reloading.

php artisan serve

 


You might also like:

Recommended Post
Featured Post
How To Merge Two Collections In Laravel
How To Merge Two Collections I...

In this article, we will see how to merge two collections in laravel 8 or laravel 9. The Illuminate\Support\Co...

Read More

Jul-18-2022

How To Create Dynamic XML Sitemap In Laravel 9
How To Create Dynamic XML Site...

In this article, we will see how to create a dynamic XML sitemap in laravel 9. As we know sitemap is a very im...

Read More

Jun-08-2022

How to Send E-mail Using Queue in Laravel 7/8
How to Send E-mail Using Queue...

Today I will show you how to send e-mail using queue in laravel 7/8, many times we can see some processes take...

Read More

Oct-30-2020

How to Upgrade from Angular 14 to Angular 15
How to Upgrade from Angular 14...

As a developer, keeping up with the latest advancements in Angular is crucial to stay ahead in the rapidly evolving worl...

Read More

May-31-2023