Laravel 7 ajax pagination example using jquery – onlinecode
In this post we will give you information about Laravel 7 ajax pagination example using jquery – onlinecode. Hear we will give you detail about Laravel 7 ajax pagination example using jquery – onlinecodeAnd how to use it also give you demo for it if it is necessary.
Today, We will explain to you how to create laravel 7 ajax pagination with JQuery. so you can see our Laravel 7 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 of this functionality.
You can easily create ajax pagination in Laravel from scratch step by step. if we need to without load 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 7
Step 2: Create Routes
Step 3: Create UsersController
Step 4: Create Blade File
Step 5: Run Our Laravel Application
Step 1: Install Laravel 7
We are going to install laravel 7, so first open the command prompt or terminal and go to go to xampp htdocs folder directory using the command prompt. after then run the below command.
composer create-project --prefer-dist laravel/laravel laravel7_ajax_pagination
Step 2: Create Routes
Add the following route code in the “routes/web.php” file.
<?php
/*
|--------------------------------------------------------------------------
| 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@index');
Route::get('get_ajax_data', 'UsersController@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 view file.
You can use the below command use for create a controller.
php artisan make:controller UsersController
app/Http/Controllers/UsersController.php
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
use AppUser;
class UsersController extends Controller
{
/**
* Display a listing of the resource.
*
* @return IlluminateHttpResponse
*/
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 7 Ajax Pagination Example Using Jquery - onlinecode</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 >
<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>resources/views/pagination_data.blade.php
<div >
<div >
<table 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 >
<div >
{!! $data->links() !!}
</div>
</div>Step 5: Run Our Laravel ApplicationWe can start the server and run this example using the below command.
php artisan serve
Now we will run our example using the below Url in the browser.
Hope this code and post will helped you for implement Laravel 7 ajax pagination example using jquery – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs