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.

Read Also:  Laravel 6 Deletes method using Eloquent ORM

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:

Read Also:  Laravel 6 Localization tutorial example - PHP

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.

Read Also:  AJAX Pagination with Laravel Example From Scratch

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to change content with next and previous button?
  2. Read Also:  Converting CSV file into an Associative Array in PHP
  3. Read Also:  PHP Time Ago Helper Function
  4. Read Also:  Check Uncheck All Checkboxes using jQuery Selectors
  5. Read Also:  how to use checkbox in php?
  6. Read Also:  Simple Jquery Ajax Pagination with Laravel 5.7 Example
  7. Read Also:  jquery AJAX Dynamically Add remove PHP MySQLi
  8. Read Also:  php array remove keys keep values example
  9. Read Also:  Simple jQuery Datepicker Example code with demo
  10. Read Also:  Converting CSV file into an Associative Array in PHP
CLOSEX