Simple Jquery Ajax Pagination With Laravel 5.7 Example

Today, We want to share with you Simple Jquery Ajax Pagination with Laravel 5.7 Example.In this post we will show you Laravel 5.7 Jquery Ajax Pagination Example From Scratch, hear for Laravel 5.7 Ajax Pagination Example we will give you demo and example for implement.In this post, we will learn about laravel 5.7 ajax pagination with jquery with an example.

Simple Jquery Ajax Pagination with Laravel 5.7 Example

Contents

There are the Following The simple About Simple Jquery Ajax Pagination with Laravel 5.7 Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop PHP Laravel 5.7 JQuery Ajax Pagination Tutorial, so the some major Laravel 5.7 AJAX Pagination with JQuery Example for this example is following below.

Laravel 5.7 setup
Create a Migration Laravel 5.7
Laravel 5.7 create Route
Create Controller

Also Read This 👉 Understanding Join Queries in Laravel [joins in laravel]

Laravel 5.7 ajax pagination with jquery Example

Step 1 : Simple Way To Install Laravel 5.7

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

Step 2: Make Laravel 5.7 Table and Model

Laravel 5.7 php artisan command >> create migration for members table

php artisan make:migration create_members_table

“database/migrations”

<?php
  
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('membername');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('members');
    }
}

Run this commands and create Mysql Database

php artisan migrate

app/Member.php

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

Step 3: Make Laravel 5.7 Route

routes/web.php

Route::get('simple-pagination','[email protected]')->name('ajax.pagination');

Step 4: Make Laravel 5.7 Controller

app/Http/Controllers/MemberController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Member;
  
class MemberController extends Controller
{
    /**
     * Display a listing of the resource.
     * laravel 5.7 pagination ajax
     * @return \Illuminate\Http\Response
     */
    public function simplePagination(Request $request)
    {
        $data = Member::paginate(5);
  
        if ($request->ajax()) {
            return view('members', compact('data'));
        }
  
        return view('simplePagination',compact('data'));
    }
}

Step 5: Make Laravel 5.7 Blade Files

resources/views/simplePagination.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel 5.7 pagination ajax - pakainfo.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 class="container">
    <h1>pagination jquery ajax laravel 5.7 - pakainfo.com</h1>
    <div id="list_members">
           @include('members')
    </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{
                retriveMembers(page);
            }
        }
    });
    
    $(document).ready(function()
    {
        $(document).on('click', '.pagination a',function(event)
        {
            event.preventDefault();
  
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
  
            var liveurl = $(this).attr('href');
            var page=$(this).attr('href').split('page=')[1];
  
            retriveMembers(page);
        });
  
    });
  
    function retriveMembers(page){
        $.ajax(
        {
            url: '?page=' + page,
            type: "get",
            datatype: "html"
        }).done(function(data){
            $("#list_members").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError){
              alert('Sorry, No response from server');
        });
    }
</script>
  
</body>
</html>

resources/views/members.blade.php

<h1>pagination jquery ajax laravel 5.7</h1>
<table class="table table-bordered">
    <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>
 <p>Simple Jquery Ajax Pagination with Laravel 5.7 Example</p> 
{!! $data->render() !!}

Save and then Run this Project

php artisan serve

open bellow URL and Run Laravel 5.7 Project

//Simple Ajax Pagination with Laravel 5.7 Example
http://localhost:8000/simple-pagination

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read This 👉 AJAX Pagination with Laravel 5.7 Example From Scratch

Summary

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

I hope you get an idea about Simple Jquery Ajax Pagination with Laravel 5.7 Example.
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.

Pakainfo

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Also Read This 👉 Allow only alphabets and space in textbox using javascript