In this post, we have covered topic on PHP Laravel framework on How to Create an Ajax pagination using Laravel with jQuery. In this article, you can find how to make simple and easy Ajax jQuery pagination in Laravel from scratch step by step. We have already know Pagination in web development is a required feature for load data in different which we have all see in most of the website Admin panel, ERP software, CMS. Main functionality of pagination is to load some data every time and it will help web page to not broken on loading of large amount of data. If we have use Ajax jQeury for creating pagination then it will more flexible and beautiful of loading data without refresh of web page.
If we have use Ajax Pagination in our web application then it will load only table data instead of refresh of whole page data. So, Every web developer has use Ajax in their pagination which very helpful to user of web application. Here in this post we will developing simple Ajax pagination in Laravel application.
For implementing Ajax pagination in Laravel you have to just follow below steps.
Step 1 : Download Laravel Application
Here we are starting from very basic, So you have not laravel application downloaded in you computer then you have to type following command for download fresh Laravel in your local computer. Below command you have to write under command prompt.
composer create-project --prefer-dist laravel/laravel student_crud
Step2 : Make Database connection
This is second step and here we will make database connection, for this you have to add following data in your .env file. In this file you have define host name, database name, username and password.
DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=
Step 3 : Create Controller
This is third step in which we want to make controller for handle http request of our web application. This will also handle ajax request also which has been send from view file.
app/Http/Controllers/PaginationController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
class PaginationController extends Controller
{
function index()
{
$data = DB::table('posts')->paginate(5);
return view('pagination', compact('data'));
}
function fetch_data(Request $request)
{
if($request->ajax())
{
$data = DB::table('posts')->paginate(5);
return view('pagination_data', compact('data'))->render();
}
}
}
?>
Step 4 : Create View
Once you have make controller then for display controller data on web page we want to make on view file. Here for Ajax pagination here we have make two view file in file we will only dislay controller data and in seocnd view file we will include controller data file in second file and in second view file we have imported jQeury and Bootstrap library links.
resources/views/pagination.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Pagination using Ajax</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>
<br />
<div class="container">
<h3 align="center">Laravel Pagination using Ajax</h3><br />
<div id="table_data">
@include('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_data(page);
});
function fetch_data(page)
{
$.ajax({
url:"/pagination/fetch_data?page="+page,
success:function(data)
{
$('#table_data').html(data);
}
});
}
});
</script>
resources/views/pagination_data.blade.php
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th width="5%">ID</th>
<th width="38%">Title</th>
<th width="57%">Description</th>
</tr>
@foreach($data as $row)
<tr>
<td>{{ $row->id }}</td>
<td>{{ $row->post_title }}</td>
<td>{{ $row->post_description }}</td>
</tr>
@endforeach
</table>
{!! $data->links() !!}
</div>
Step 5 : Set Route
This is last step in making Ajax Pagination in Laravel and lastly we want to set route for controller index() and fetch_data() method. Below you can find route code below.
routes/web.php
<?php
Route::get('/pagination', 'PaginationController@index');
Route::get('pagination/fetch_data', 'PaginationController@fetch_data');
?>
php artisan serve
Once this command successfully run then it will provide you base url of your Laravel Ajax pagination. For run pagination application in Laravel using Ajax you have to write following link in your web browser.
http://127.0.0.1:8000/pagination
Congratulations, great post!
ReplyDeletewhere is the Pagination
ReplyDeletethanks it's working i just make a mistake in the number of insert
ReplyDeleteWorks perfect.
ReplyDeleteThank you!
Nice!!
ReplyDeletestill reload page when use the pagination
ReplyDeletebro use class (justify-between) at the place of pagination in jquery code.
Deletebcox laravel use tailwind css.
if you want to use same as pagination class then do some changes in
App/provider/serviceprovider
under this file write the below code under the boot function
and use this at the top of this file(service provider file)
use Illuminate\Pagination\Paginator;(use this at the top of service provider file)
public function boot()
{
Paginator::useBootstrap();
}
*after this code pagination use bootstrap instead of tailwind
Now Reloading Problem solved.
Thank you so much it's working.
ReplyDeleteHello! thanks for the great work!
ReplyDeleteHow to implement this with the ajax live search form tutorial u did earlier
It did not work.. It's still reloading the page
ReplyDeleteGreat Work
ReplyDeleteGreat Work, Worked for me. :)
ReplyDeleteGreat!. It was supper help. Thanks
ReplyDeleteI have this error could someone help me please?
ReplyDeleteUncaught TypeError: Cannot read property 'split' of undefined
Nice Job
ReplyDeletethanks a lot
ReplyDeleteyou are awsome !!!
ReplyDeletenice work
ReplyDeletethanks this works!!!
ReplyDelete