HDTuto.com

PHP Laravel 5.6 JQuery Ajax Pagination Tutorial


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.




February 23, 2018 | Category : PHP Laravel JQuery Ajax Laravel 5 Laravel 5.6
Related Posts