In this article, I demonstrate with you how to create jquery ajax pagination in laravel 5.6 application. we will create paginate using laravel 5.6 links() helper. pagination is code part of every application and if it is with ajax then awesome. So let's see jquery ajax pagination example below.
As we know, today ajax is more useful because everyone wants to his web application should be work fast. So if you want to make your web application faster then you have to use jquery ajax. Using jquery ajax you can simply get data and post data using API. So here I want to share with you how to create ajax paginate in laravel 5.6 application.
Step 1: Create Table and Model
First thing is we have to create "tagslist". so we have to create migration for tagslist table using Laravel 5.6 php artisan command, so first fire bellow command:
php artisan make:migration create_tagslist_table
After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create articles table.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTagslistTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('tagslist', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('tagslist');
}
}
Next run migration for creating table by following command:
php artisan migrate
Next we will create model for "tagslist" table so just run bellow command and create new model:
php artisan make:model TagList
Ok, so after run bellow command you will find app/TagList.php and put bellow content in TagList.php file:
app/TagList.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class TagList extends Model
{
public $table = "tagslist";
public $fillable = ['name'];
}
Step 2: Add Route
In second step, we will add new route in web.php file. One route for generate form and also get records in json format when fire ajax:
routes/web.php
Route::get('ajax-pagination',array('as'=>'ajax.pagination','uses'=>'HomeController@ajaxPagination'));
Step 3: Create Controller Method
In third step, we have to create ajaxPagination() in your controller, as per example i will create method in my HomeController.
app/Http/Controllers/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\TagList;
class HomeController extends Controller
{
public function ajaxPagination(Request $request)
{
$tags = TagList::paginate(5);
if ($request->ajax()) {
return view('presult', compact('tags'));
}
return view('taglist',compact('tags'));
}
}
Step 4: Create Blade Files
Next, we will create two view file as like following.
1)taglist.blade.php
2)presult.blade.php
resources/views/taglist.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.6 AJAX Pagination Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h1>Laravel 5.6 AJAX Pagination Example</h1>
<div id="tag_container">
@include('presult')
</div>
</div>
<script type="text/javascript">
$(window).on('hashchange', function() {
if (window.location.hash) {
var page = window.location.hash.replace('#', '');
if (page == Number.NaN || page <= 0) {
return false;
}else{
getData(page);
}
}
});
$(document).ready(function()
{
$(document).on('click', '.pagination a',function(event)
{
event.preventDefault();
$('li').removeClass('active');
$(this).parent('li').addClass('active');
var myurl = $(this).attr('href');
var page=$(this).attr('href').split('page=')[1];
getData(page);
});
});
function getData(page){
$.ajax(
{
url: '?page=' + page,
type: "get",
datatype: "html"
})
.done(function(data)
{
$("#tag_container").empty().html(data);
location.hash = page;
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
}
</script>
</body>
</html>
resources/views/presult.blade.php
<table class="table table-bordered">
<thead>
<tr>
<th width="100px">ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
@foreach ($tags as $tag)
<tr>
<td>{{ $tag->id }}</td>
<td>{{ $tag->name }}</td>
</tr>
@endforeach
</tbody>
</table>
{!! $tags->render() !!}
Now you can run this example and see enjoy.
I hope you found your best solution.
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example