Ajax Pagination with Laravel 5.8 Tutorial

Ajax Pagination with Laravel 5.8 Tutorial

In this post we will give you information about Ajax Pagination with Laravel 5.8 Tutorial. Hear we will give you detail about Ajax Pagination with Laravel 5.8 TutorialAnd how to use it also give you demo for it if it is necessary.

Laravel 5.8 ajax pagination example is our leading topic. i will share simple example of jquery ajax pagination in laravel 5.8 application. than you can easily implement search, sorting and also pass query string with ajax pagination logic.

i list step to create ajax pagination with laravel 5.8, you need to follow that step to create simple ajax pagination example.

Pagination is a very basic requirement of every project like Admin Panel, ERP or back-end Panel. A pagination help us to load few records every time, that way can not broken web page due to lots of data. If you are making pagination and do it using ajax then it more better way. Ajax Pagination load only your table data instead of whole page. So ajax pagination is very helpful.

In this example, we simply create “items” table using migration command and add some dummy records. After that we will create one route for display view and write code jquery ajax on blade file. So, you have to just follow bellow step and you will get simply ajax pagination in laravel 5.8.

Step 1 : Install Laravel 5.8

we are going from scratch, So we require to get fresh Laravel 5.8 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Table and Model

In this step we have to create migration for items table using Laravel 5.8 php artisan command, so first fire bellow command:

php artisan make:migration create_items_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 items table.

<?php

use IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;

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');

}

}

Then after, simply run migration:

php artisan migrate

After create “items” table you should create Item model for items, so first create file in this path “app/Item.php” and put bellow content in item.php file:

app/Item.php

<?php

namespace App;

use IlluminateDatabaseEloquentModel;

class Item extends Model

{

}

Also see:Laravel 5.8 CRUD (Create Read Update Delete) Tutorial For Beginners

Step 3: add Route

In this is step we need to create routes for items listing. so open your “routes/web.php” file and add following route.


routes/web.php

Route::get('ajax-pagination','AjaxController@ajaxPagination')->name('ajax.pagination');

Step 4: Create AjaxController

In this step, we have to create two view file one for layout and another for data. now we should create new controller as AjaxController in this path “app/Http/Controllers/AjaxController.php”. this controller will manage all listing items and item ajax request and return response, so put bellow content in controller file:

app/Http/Controllers/AjaxController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

use AppItem;

class AjaxController extends Controller

{

/**

* Display a listing of the resource.

*

* @return IlluminateHttpResponse

*/

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

In Last step, let’s create ajaxPagination.blade.php(resources/views/ajaxPagination.blade.php) for layout and lists all items code here and put following code:

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 >

<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>

resources/views/presult.blade.php

<table >

<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() !!}

Make sure you have some dummy data on your items table before run this example. Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

Also see:Laravel 5.8 Ajax CRUD tutorial using Datatable JS

http://localhost:8000/ajax-pagination

I hope it can help you…

Hope this code and post will helped you for implement Ajax Pagination with Laravel 5.8 Tutorial. 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

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  20  =  24

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US