AJAX Pagination with Laravel 5.7 Example From Scratch

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

AJAX Pagination with Laravel 5.7 Example From Scratch

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

As I will cover this Post with live Working example to develop ajax crud operations in laravel 5.7 with modal & pagination, so the some laravel load more button pagination for this example is following below.

Also Read :  Search Engine Rankings TIPS AND TRICKS

Step 1 : Install PHP Laravel 5.7

get fresh Laravel 5.7 application

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

Step 2: Create MySQL Table and Laravel Model

make migration for teams table

php artisan make:migration create_teams_table

database/migrations

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateTeamsTable extends Migration
{
    public function up()
    {
        Schema::create('teams', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
  
    public function down()
    {
        Schema::dropIfExists('teams');
    }
}

run migration

php artisan migrate

app/Team.php

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

Step 3: Define Laravel Route

routes/web.php

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

Step 4: Define a Laravel Controller

app/Http/Controllers/cutomController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Team;
  
class cutomController extends Controller
{
    public function customPagination(Request $request)
    {
        $data = Team::paginate(5);
  
        if ($request->ajax()) {
            return view('teamresults', compact('data'));
        }
  
        return view('customPagination',compact('data'));
    }
}

Step 5: Make Laravel Blade Files

resources/views/customPagination.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Ajax CRUD example in Laravel 5.7 application - 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>Laravel 5.7 Ajax CRUD with Pagination example and demo from scratch - pakainfo.com</h1>
    <div id="team_datas">
           @include('teamresults')
    </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{
                fetchTeams(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];
  
            fetchTeams(page);
        });
  
    });
  
    function fetchTeams(page){
        $.ajax(
        {
            url: '?page=' + page,
            type: "get",
            datatype: "html"
        }).done(function(data){
            $("#team_datas").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError){
              alert('No response from server');
        });
    }
</script>
  
</body>
</html>

resources/views/teamresults.blade.php

<h3>ajax crud operations in laravel 5.7 with modal & pagination</h3>
<table class="pakainfo table table-bordered">
    <thead>
        <tr>
            <th width="100px">ID</th>
            <th>Team Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $value)
        <tr>
            <td>{{ $value->id }}</td>
            <td>{{ $value->name }}</td>
        </tr>
        @endforeach
    </tbody>
</table>
  
{!! $data->render() !!}

Last step We can open this bellow URL on your default any browser:

Also Read :  Mongodb Insert Update Delete – CRUD Operation using PHP & Mongodb

http://localhost:8000/custom-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 AJAX Pagination with Laravel 5.7 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.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]

Leave a Reply

  • (will not be published)