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
Contents
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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.