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.

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:

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.

Related FAQ

Here are some more FAQ related to this Article: