Simple Jquery Ajax Pagination with Laravel 5.7 Example

Ajax JavaScript jQuery Laravel Mysql Mysqli php Programming Technology

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Simple Jquery Ajax Pagination with Laravel 5.7 Example

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

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 :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   call to undefined function mysql_pconnect()
  2.   Laravel 5.7 JQuery AJAX Tutorial Example
  3.   Angular 6 Module File Tutorial with Examples
  4.   AJAX Pagination with Laravel 5.7 Example From Scratch
  5.   Bootstrap Multiple Item Product Carousel slider
  6.   Angular 6 DataTable Pagination Sorting Searching Example
  7.   Stripe API Webhook upgrade and downgrade Subscriptions
  8.   AJAX Pagination with Laravel Example From Scratch
  9.   How to Find The Total Number of Products in WP REST API v3?
  10.   Learn Laravel (Best Laravel Tutorials for Beginners)

Leave a Reply

Your email address will not be published. Required fields are marked *