Laravel 5.5 Ajax Pagination Example

Hi Guys.

In this article i will let you know how to make jquery ajax pagination in Laravel 5.5 application.

As we know, today ajax is more use because every one wants to his web app should be work fast. So if you want make your web app more fast 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.5 application.

You have to simple follow bellow few step and get layout like as bellow:

Layout:

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

Laravel 5.5 Ajax Pagination Example

Do you like below Tutorials ?

New Articles

Blog Categories

Random Articles