In this post i will share you example of load more data in laravel using ajax jquery, In many website has huge content, when ypu scroll down page for more content at that time it will be take some time to load more data, so here we will auto load more data on page scroll using ajax.
Many time you need to load more data on the infinity page scroll in laravel, so, i will give you example ajax jquery load more data in laravel.
Step 1 – Install Laravel
Step 2 – Create Model and Migration
Step 3 – Add Route
Step 4 – Create Controller
Step 5 – Create Blade
Step 1 – Install Laravel
First of all you need to install new laravel application for load more data example if not exist
composer create-project --prefer-dist laravel/laravel blog
Step 2 – Create Model and Migration
For creating new model and migration run below command in your terminal.
php artisan make:model User -m
Now, open this file location app/database/migrations and add following fields.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Now, run migration for the same.
php artisan migrate
Step 3 – Add Route
Now, add route for auto load more data on page scroll example.
Route::get('user', [UserController::class, 'loadMore']);
Step 4 – Create Controller
Now,create UserController and add below code in this controller.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use DB;
class UserController extends Controller
{
public function loadMore(Request $request)
{
$users = User::paginate(10);
$data = '';
if ($request->ajax()) {
foreach ($users as $user) {
$data.='<li>'.'Name:'.' <strong>'.$user->name.'</strong><br> Email: '.$user- >email.'</li>';
}
return $data;
}
return view('user',compact('users'));
}
}
Step 5 – Create Blade
Now create blade file for output.
<!doctype html>
<html lang="en">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel 8 Load More Data using Ajax jQuery - websolutionstuff.com</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.wrapper > ul#results li {
margin-bottom: 2px;
background: #e2e2e2;
padding: 20px;
list-style: none;
}
.ajax-loading{
text-align: center;
}
</style>
</head>
<body>
<h2 style="text-align: center;margin: 30px 0px">Laravel 8 Load More Data using Ajax jQuery - websolutionstuff.com</h2>
<div class="container">
<div class="wrapper">
<ul id="results"></ul>
<div class="ajax-loading"><img src="{{ asset('images/loader.gif') }}" /></div>
</div>
</div>
</body>
</html>
<script>
var site_url = "{{ url('/') }}";
var page = 1;
load_more(page);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
page++;
load_more(page);
}
});
function load_more(page){
$.ajax({
url: site_url + "/user?page=" + page,
type: "get",
datatype: "html",
beforeSend: function()
{
$('.ajax-loading').show();
}
})
.done(function(data)
{
if(data.length == 0){
$('.ajax-loading').html("No more records!");
return;
}
$('.ajax-loading').hide();
$("#results").append(data);
})
.fail(function(jqXHR, ajaxOptions, thrownError)
{
alert('No response from server');
});
}
</script>