Raviya Technical
Published in

Raviya Technical

Ajax Pagination with Laravel Tutorial

Step 1 Install Laravel

Step 2 Create Table and Model (Cmd)

php artisan make:migration create_items_table

Location:- 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 migrate

Location:- 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 - ItSolutionStuff.com</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 - ItSolutionStuff.com</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

--

--

--

PHP, Laravel And Flutter Development

Recommended from Medium

From Photographer to Developer due to Covid

Create Calendar Events in Google Calendar using the Calendar API and Google Apps Script.

Cloudy sky

💫 Building Fast Forms in React with HTML5 & Validations

Files transfer between Kali OS -> mobile or PC(Hacker Style)

UPDATE ON PLUTOS NETWORK IN THE MONTH OF NOVEMBER 2021

How to find HSV range of an Object for Computer Vision applications?

Why I hate(d) Java

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raviya Technical

Raviya Technical

raviyatechnical.blogspot.com

More from Medium

Laravel Advance | How to use SweetAlert message box in Laravel

Create Laravel JSON Fake REST APIs Server via JSON File

Laravel 8 Toastr Notifications Example

How To Get Last Record of Database Table in Laravel 8