Laravel 5 JQuery AJAX Pagination Example

Laravel 5 JQuery AJAX Pagination Example

In this Post We Will Explain About is Laravel 5 JQuery AJAX Pagination Example With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to jquery – AJAX pagination with Laravel Example

In this post we will show you Best way to implement How to Create an Ajax Pagination Using Laravel, hear for Laravel Jquery Ajax Pagination Example From Scratch with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Phase 1 : Install Laravel Application

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

Phase 2 : Database Configuration

In this Phase, we need to create database some setting configuration, you have to put the following Information on your .env file.

Also Read :   JavaScript Objects - methods array constructor and new object

DB_HOST=localhost
DB_DATABASE=Your_db_name
DB_USERNAME=homestead
DB_PASSWORD=LivePass

Phase 3: Create Product Table and Model

php artisan make:migration create_items_table

And then this Laravel command you will search one file in following simple Laravel path Like as database/migrations as well as you have to put bellow some source code in your Laravel Database migration file for make products table.

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;


class CreateItemsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
           $table->increments('id');
           $table->string('title');
           $table->string('pro_desc');
           $table->timestamps();
       });
    }


    public function down()
    {
        Schema::drop("products");
    }
}

app/Product.php

<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
}

Phase 4: Add New Route

In this is Phase we required to make Laravel routes for products display listing. so first of all open your nav routes/web.php file and put the following simple route.routes/web.php

Route::get('live-pagination',array('as'=>'pagination','uses'=>'ProductController@LiveAjaxPages'));

Phase 5: Create Controller

app/Http/Controllers/ProductController.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
    public function __construct()
    {


    }

    public function LiveAjaxPages(Request $request)
    {
        $products = Product::paginate(5);
        if ($request->ajax()) {
            return view('data', compact('products'));
        }
        return view('products',compact('products'));
    }
}

Phase 6: Create View

In Final step, let’s make products.blade.php(resources/views/products.blade.php) for HTML view side layout and lists all products source code here and add the following source code:

Also Read :   Highcharts Chart using Laravel with Database

resources/views/products.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Simple Laravel Ajax Pagination using Mysqli Database Example</title>
<link href="3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Items Data</h2>
<div id="product-lists">
@include('data')
</div>

</div>

<script type="text/javascript">

$(window).on('hashchange', function() {
    if (window.location.hash) {
        var live_page = window.location.hash.replace('#', '');
        if (live_page == Number.NaN || live_page <= 0) {
            return false;
        }else{
            fetchProduct(live_page);
        }
    }
});

$(document).ready(function()
{
    $(document).on('click', '.pagination a',function(event)
    {
        $('li').removeClass('active');
        $(this).parent('li').addClass('active');
        event.preventDefault();


        var myurl = $(this).attr('href');
        var live_page=$(this).attr('href').split('live_page=')[1];


        fetchProduct(live_page);
    });
});
function fetchProduct(live_page){
        $.ajax(
        {
            url: '?live_page=' + live_page,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#product-lists").empty().html(data);
            location.hash = live_page;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('sorry, No Any response from server');
        });
}
</script>
</body>
</html>

resources/views/data.blade.php

<table class="table table-bordered">
<thead>
    <tr>
        <th>Product Name</th>
        <th>Information</th>          
    </tr>
</thead>
<tbody>
    @foreach ($products as $product)
    <tr>
        <td>{{ $product->title }}</td>
        <td>{{ $product->pro_desc }}</td>
    </tr>
    @endforeach
</tbody>
</table>


{!! $products->render() !!}

Create sure you have some fake or dumo data on your products table before run this simple step by step example. Now I am ready to run simple laravel-jquery-live-pagination-example-from-scratch example so execute bellow Laravel command for quick run in cmd:

Also Read :   Advanced jQuery Ajax Pagination PHP MySQL using jQuery

php artisan serve

Lastly you can simple run your project open bellow URL on your any browser:

http://localhost:8000/live-pagination

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is How to Create an Ajax Pagination Using Laravel And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.