Laravel 5.6 Pagination with jQuery Ajax PHP and MySQL

Laravel 5.6 Pagination with jQuery Ajax PHP and MySQL

In this Post We Will Explain About is Laravel 5.6 Pagination with jQuery Ajax PHP and MySQL With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Laravel 5.6 Pagination with Filters Example

In this post we will show you Best way to implement Laravel 5.6 Ajax CRUD with Pagination example and demo from scratch, hear for Laravel 5.6 Jquery Ajax Pagination Example From Scratch with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




Phase 1: Make Table and Model

First thing is I have to Make “studlist”. Therefor I have to Make database migration for studlist table using Laravel 5.6 with php artisan simple command, Therefor first run simple bellow command:

Also Read :   Laravel Crud Tutorial From Scratch - Laravel Insert Update Delete

php artisan make:migration create_studslist_table

After this Laravel command you will find one file in following simple path Like as a database/migrations so you have to insert bellow some source code in your Mysql database migration file for make Post table.

<?php
//AJAX Pagination with PHP Laravel 5.6
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTagslistTable extends Migration
{

    public function up()
    {
        Schema::create('studlist', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('studlist');
    }
}

And then execute migration for making Laravel table by following command:

php artisan migrate

And then I will make Laravel model for “studlist” table Therefor just execute bellow some command and make Laravel new model:

php artisan make:model StudList

Ok, Therefor after execute bellow command you will find app/StudList.php and Insert some bellow data content in StudList.php file:

app/StudList.php

<?php
//Ajax Pagination with jQuery & PHP Laravel 5.6
namespace App;
use Illuminate\Database\Eloquent\Model;
class StudList extends Model
{
    public $table = "studlist";
    public $fillable = ['name'];
}

Phase 2: Add Route

In second step, I will Insert new route in web.php file. One Laravel route for generate HTML form and also get data records in json format when fire jqXHR ajax:

Also Read :   Strong Random Password Generator Using Pure JavaScript

routes/web.php

Route::get('ajax-pagination',array('as'=>'ajax.pagination','uses'=>'StudentController@studentAjaxPagination'));

Phase 3: Make Controller Method

In third step, we have to Make studentAjaxPagination() in your controller, as per example i will make method in my StudentController.app/Http/Controllers/StudentController.php

<?php
//Laravel 5.6 Jquery Ajax Pagination Example From Scratch
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\StudList;
class StudentController extends Controller
{
    public function studentAjaxPagination(Request $request)
    {
        $students = StudList::paginate(5);
        if ($request->ajax()) {
            return view('studentresult', compact('students'));
        }
        return view('studlist',compact('students'));
    }
}

Phase 4: Make Blade Files

And then, I will Make two HTML view file as like following.
1)studlist.blade.php
2)studentresult.blade.php

resources/views/studlist.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 5.6 AJAX Pagination Example</title>
<link rel="stylesheet" href="bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="live24u container">
<h1>PHP - Laravel 5.6 AJAX Pagination Example step by step</h1>
<div id="student_container">
       @include('studentresult')
</div>
</div>
<script type="text/javascript">
$(window).on('hashchange', function() {
        if (window.location.hash) {
            var lpage = window.location.hash.replace('#', '');
            if (lpage == Number.NaN || lpage <= 0) {
                return false;
            }else{
                livefetchStudent(lpage);
            }
        }
    });

$(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 lpage=$(this).attr('href').split('lpage=')[1];
        livefetchStudent(lpage);
    });
});

function livefetchStudent(lpage){
        $.ajax(
        {
            url: '?lpage=' + lpage,
            type: "get",
            datatype: "html"
        })
        .done(function(data)
        {
            $("#student_container").empty().html(data);
            location.hash = lpage;
        })
        .fail(function(jqXHR, ajaxOptions, thrownError)
        {
              alert('Sorry, No response from server');
        });
}
</script>
</body>
</html>

resources/views/studentresult.blade.php

<table class="live24u table table-bordered">
<thead>
<tr>
<th width="100px">ID</th>
<th>Student Name</th>
</tr>
</thead>
<tbody>
@foreach ($students as $stud)
    <tr>
        <td>{{ $stud->id }}</td>
        <td>{{ $stud->name }}</td>
    </tr>
    @endforeach
</tbody>
</table>
{!! $students->render() !!}

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Also Read :   Laravel Create REST API Step By Step with Authentication





Example

I hope you have Got What is laravel 5.6 pagination using ajax And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.