Ajax Pagination with Laravel Tutorial
2 min readAug 1, 2021
Step 1 Install Laravel
Step 2 Create Table and Model (Cmd)
php artisan make:migration create_items_tableLocation:- database/migrations
<?phpuse Illuminate\Support\Facades\Schema;use Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration;class CreateItemsTable extends Migration{/*** Run the migrations.** @return void*/public function up(){Schema::create('items', function (Blueprint $table) {$table->increments('id');$table->string('name');$table->timestamps();});}/*** Reverse the migrations.** @return void*/public function down(){Schema::dropIfExists('items');}}
Run Migration
php artisan migrateLocation:- app/Item.php OR app/Models/Item.php
<?phpnamespace App;use Illuminate\Database\Eloquent\Model;class Item extends Model{}
Step 3 add Route
Location:- routes/web.php
Route::get('ajax-pagination','AjaxController@ajaxPagination')->name('ajax.pagination');Step 4 Create AjaxController (Cmd)
Location:- app/Http/Controllers/AjaxController.php
<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;use App\Item;class AjaxController extends Controller{/*** Display a listing of the resource.** @return \Illuminate\Http\Response*/public function ajaxPagination(Request $request){$data = Item::paginate(5);if ($request->ajax()) {return view('presult', compact('data'));}return view('ajaxPagination',compact('data'));}}
Step 5 Create View Files
Location:- resources/views/ajaxPagination.blade.php
<!DOCTYPE html><html><head><title>Laravel 5.8 AJAX Pagination Example</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/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.8 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>
Location:- resources/views/presult.blade.php
<table class="table table-bordered"><thead><tr><th width="100px">ID</th><th>Name</th></tr></thead><tbody>@foreach ($data as $value)<tr><td>{{ $value->id }}</td><td>{{ $value->name }}</td></tr>@endforeach</tbody></table>{!! $data->render() !!}
Start Laravel (Cmd)
php artisan serve