Keywords :- Load More Data After Click on Load More Button Using Ajax in Laravel 6.0, Laravel 5.8, Laravel 5.7, Laravel 5.6, Laravel 5.5, Laravel 5.4+…
Hello Friends Today, Through this Tutorial, I will tell you how to load data with the click of a button in the laravel framework.
I will tell you step by step through this tutorial, so let’s go
Overview
Step 1:- Create Database Table
Step 2:- Create Blade PHP File into resources/views/demoload.blade.php (demoload.blade.php)
Step 3:- url add into web.php file
Step 4:- Create Controller file For Load More Data Write Code (jobsController.php)
Step 1:- Create Database Table
CREATE TABLE `jobs` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `job_title` text, `job_description` text, `created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, `updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=101 DEFAULT CHARSET=latin1;
Step 2:- Create Blade PHP File into resources/views/demoload.blade.php (demoload.blade.php)
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Load More Data After Click on Load More Button Using Ajax in laravel</h1>
<div id="load-data">
<?php
foreach ($jobslistshow as $kee) {
$jid = $kee->id;
?>
<div class="post-aply mr-bt">
<div class="job-aply-hed">
<h1><a href="{{url($kee->job_title)}}"><?php echo $kee->job_title; ?></a></h1>
<p><i class="far fa-file-alt"></i><?php echo $kee->job_description; ?></p>
</div>
</div>
<?php } ?>
<div id="remove-row" class="text-center">
<button id="btn-more" data-id="{{ $kee->id }}" class="loadmore-btn">Load More</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click','#btn-more',function(){
var id = $(this).data('id');
$("#btn-more").html("Loading....");
$.ajax({
url : '{{url("loadmoredata")}}',
method : "POST",
data : {id:id, _token:"{{csrf_token()}}"},
dataType : "text",
success : function (data)
{
if(data != '')
{
$('#remove-row').remove();
$('#load-data').append(data);
}
else
{
$('#btn-more').html("No Data");
}
}
});
});
});
</script>
</body>
</html>
Step 3:- url add into web.php file(routes/web.php)
Route::get('demoload', function () {
$jobslistshow = DB::table('jobslist')->orderBy('id', 'desc')->limit(5)->get();
return view('demoload')->with('jobslistshow', $jobslistshow);
});
Route::post('loadmoredata','jobsController@loadmoredata');
Step 4:- Create Controller file For Load More Data Write Code (jobsController.php)
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\User;
use App\Http\Controllers\Controller;
use Illuminate\Auth\Authenticatable;
use DB;
use Validator;
use Redirect;
use View;
class jobsController extends Controller
{
public function loadmoredata(Request $request)
{
$output = '';
$id = $request->id;
$posts = DB::table('jobslist')->where('id','<',$id)->orderBy('id', 'desc')->limit(5)->get();
if(!$posts->isEmpty())
{
foreach($posts as $post)
{
$id = $post->id;
$created_at=$post->created_at;
$linkurl = url($post->job_title);
$output .= '<div class="post-aply mr-bt">
<div class="job-aply-hed">
<h1><a href="'.$linkurl.'">'.$post->job_title.'</a></h1>
<p>'.$post->job_description.'</p>
</div>
</div>';
}
$output .= '<div id="remove-row" class="text-center">
<button id="btn-more" data-id="'.$post->id.'" class="loadmore-btn text-center">Load More</button>
</div>';
echo $output;
}
}
}