AJAX Pagination with Laravel Example From Scratch

Today, We want to share with you AJAX Pagination with Laravel Example From Scratch.In this post we will show you Ajax Pagination Using jQuery, Laravel 5.7 And MySQL, hear for Pagination with jQuery Ajax Laravel 5.7 and MySQL we will give you demo and example for implement.In this post, we will learn about Laravel Easy AJAX-enabled Pagination Plugin For jQuery with an example.

AJAX Pagination with Laravel Example From Scratch

There are the Following The simple About AJAX Pagination with Laravel Example From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Laravel Jquery Ajax Pagination Example From Scratch, so the some major files and Directory structures for this example is following below.

  • Simple Ajax Pagination with Laravel
  • Setup Laravel 5.7 Project
  • Laravel Member Table and Model
  • Include New Laravel Route
  • Laravel Controller
Read Also:  jquery multiselect dropdown checkbox with search

Step 1 : Setup Laravel Project

fresh Laravel Latest version Project using bellow command

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

Step 2 : Database Settings

change .env files

DB_HOST=localhost
DB_DATABASE=gridmembers
DB_USERNAME=root
DB_PASSWORD=

Step 3: Make Laravel Member Table and Model

Laravel php artisan command run

php artisan make:migration create_members_table

database/migrations

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMembersTable extends Migration
{
    public function up()
    {
        Schema::create('members', function (Blueprint $table) {
           $table->increments('id');
           $table->string('title');
           $table->string('information');
           $table->timestamps();
       });
    }
    public function down()
    {
        Schema::drop("members");
    }
}

app/Member.php

<?php
//AJAX Pagination with Laravel Example From Scratch
namespace App;
use Illuminate\Database\Eloquent\Model;
class Member extends Model
{
}

Step 4: Include New Laravel Route

routes/web.php

Route::get('ajax-pagination',array('as'=>'pagination','uses'=>'[email protected]'));

Step 5: Make Laravel Controller

app/Http/Controllers/MemberController.php

ajax()) {
            return view('data', compact('members'));
        }
        return view('members',compact('members'));
    }
}

Step 6: Make a Laravel View

resources/views/members.blade.php



	<title>AJAX Pagination with Laravel Example From Scratch</title>
	
	
    


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

$(window).on('hashchange', function() {
    if (window.location.hash) {
        var currentpage = window.location.hash.replace('#', '');
        if (currentpage == Number.NaN || currentpage <= 0) {
            return false;
        }else{
            getMembers(currentpage);
        }
    }
});
$(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 currentpage=$(this).attr('href').split('currentpage=')[1];
        getMembers(currentpage);
    });
});
function getMembers(currentpage){
        $.ajax(
        {
            url: '?currentpage=' + currentpage,
            type: "get",
            datatype: "html",
        })
        .done(function(data)
        {
            $("#member-lists").empty().html(data);
            location.hash = currentpage;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('Sorry, No Any response from server side');
        });
}



resources/views/data.blade.php

<h2>AJAX Pagination with Laravel Example From Scratch</h2>
<table class="pakainfo table table-bordered">
<thead>
    <tr>
        <th>Title</th>
        <th>Information</th>          
    </tr>
</thead>
<tbody>
    @foreach ($members as $member)
    <tr>
        <td>{{ $member->title }}</td>
        <td>{{ $member->information }}</td>
    </tr>
    @endforeach
</tbody>
</table>
{!! $members->render() !!}

Start a server and run Laravel Project

php artisan serve

save and run this Laravel Project

http://localhost/ajax-pagination

AJAX Pagination with Laravel Example – Output

AJAX Pagination with Laravel Example From Scratch
AJAX Pagination with Laravel Example From Scratch
Angular 6 CRUD Operations Application Tutorials

Read :

Read Also:  Laravel Time Zone Converter(Time Difference Calculator)

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about AJAX Pagination with Laravel Example From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.