Laravel 8 Ajax Pagination Example Using Jquery

September 29, 2020 XpertPhp Comments 0 Comment

Today, We will explain to you how to create laravel 8 ajax pagination with JQuery. so you can see our Laravel 8 ajax pagination example using jquery.

Pagination means document content dividing into multiple pages. whenever we have one long page at that time we dividing into multiple pages. but, laravel provides the in-build functionality for pagination like as paginate(), count() and link(). we just use this functionality.

You can easily create ajax pagination in Laravel from scratch step by step. if we need to without load the page and get pagination data in laravel. then we will use the laravel ajax pagination. so you can follow the below step.

Overview

Step 1: Install Laravel 8

Step 2: Create Routes

Step 3: Create UsersController

Step 4: Create Blade File

Step 5: Run Our Laravel Application

Step 1: Install Laravel 8

We are going to install laravel 8, so first open the command prompt or terminal and go to xampp htdocs folder directory using the command prompt. after then run the below command.

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

1	composer create-project --prefer-dist laravel/laravel laravel8_ajax_pagination

Step 2: Create Routes

Add the following route code in the “routes/web.php” file.

<?php
use App\Http\Controllers\UsersController;

/*
|--------------------------------------------------------------------------
| 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::get('pagination',[UsersController::class, 'index']);
Route::get('get_ajax_data',[UsersController::class, 'get_ajax_data']);
?>

<?php

use App\Http\Controllers\UsersController;

|--------------------------------------------------------------------------

| 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::get('pagination',[UsersController::class, 'index']);

Route::get('get_ajax_data',[UsersController::class, 'get_ajax_data']);

Step 3: Create UsersController

Here in this step, we will create the UsersController and index method. after then we will return the limit data for the view file.

You can use the below command use to create a controller.

php artisan make:controller UsersController

1	php artisan make:controller UsersController

app/Http/Controllers/UsersController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
  
class UsersController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data = User::paginate(5);
        return view('pagination',compact('data'));
    }
    function get_ajax_data(Request $request)
    {
     if($request->ajax())
     {
      $data = User::paginate(5);
      return view('pagination_data', compact('data'))->render();
     }
}
?>

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\User;

class UsersController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$data = User::paginate(5);

return view('pagination',compact('data'));

}

function get_ajax_data(Request $request)

{

if($request->ajax())

{

$data = User::paginate(5);

return view('pagination_data', compact('data'))->render();

}

Step 4: Create Blade File

Finally, We will create a pagination.blade.php and pagination_data.blade.php files in the “resources/views/” folder directory and paste the below code.
resources/views/pagination.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Laravel 8 Ajax Pagination Example Using Jquery - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div id="table_data">
		@include('pagination_data')
	   </div>
	</div>
</body>  
<script>
$(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:"get_ajax_data?page="+page,
   success:function(data)
   {
    $('#table_data').html(data);
   }
  });
 }
 
});
</script>
</html>

<!DOCTYPE html>

<head>

<title>Laravel 8 Ajax Pagination Example Using Jquery - XpertPhp</title>

</head>

<body>

@include('pagination_data')

</div>

</body>

$(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:"get_ajax_data?page="+page,

success:function(data)

{

$('#table_data').html(data);

}

});

}

});

</script>

</html>

resources/views/pagination_data.blade.php

<div class="row">
	<div class="col-lg-12">
		
		<table class="table table-bordered" id="laravel">
		   <thead>
			  <tr>
				 <th>Id</th>
				 <th>Name</th>
				 <th>Email</th>
				 <th>Created at</th>
			  </tr>
		   </thead>
		   <tbody>
				@if(!empty($data) && $data->count())
				  @foreach($data as $user)
				  <tr>
					 <td>{{ $user->id }}</td>
					 <td>{{ $user->name }}</td>
					 <td>{{ $user->email }}</td>
					 <td>{{ date('d m Y', strtotime($user->created_at)) }}</td>
				  </tr>
				  @endforeach
				@else
				<tr>
					<td colspan="4">No data found.</td>
				</tr>
				@endif
		   </tbody>
		</table>
	</div>
</div>	
<div class="row">  
	<div class="col-lg-12">
		{!! $data->links() !!}
	</div>
</div>

<thead>

<tr>

<th>Email</th>

<th>Created at</th>

</tr>

</thead>

<tbody>

@if(!empty($data) && $data->count())

@foreach($data as $user)

<tr>

<td>{{ $user->email }}</td>

<td>{{ date('d m Y', strtotime($user->created_at)) }}</td>

</tr>

@endforeach

@else

<tr>

<td colspan="4">No data found.</td>

</tr>

@endif

</tbody>

</table>

</div>

{!! $data->links() !!}

</div>

Step 5: Run Our Laravel Application
We can start the server and run this example using the below command.

php artisan serve

1	php artisan serve

Now we will run our example using the below Url in the browser.

http://127.0.0.1:8000/pagination

1	http://127.0.0.1:8000/pagination

Please follow and like us:

Related posts: