Load More Data on Page Scroll using Ajax Jquery Laravel 6

Laravel 6 , Laravel

Nicesnippets

5059

25-09-2019


In this article, I will show you load more data with scroll using jquery and php Laravel 6. You don't have need to click anywhere to load data because data is loading on page scroll automatically from MySQl database.

It will check if data length is equal to 0 then display message for "No more records!" and if data length is more than 0 then it append html data to list.

Simpe example as bellow.

Step 1 : Create Table and Model

In this step, we will create first post table and model.

app/Post.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

public $table = "post";

protected $fillable = [ 'title','description' ];

}

I have inserted dummy records in my post table to see the loader on page scroll.

Step 2: Add Routes

In this step, we will add routes to handle request.

app/Http/routes.php

Route::get('jquery-loadmore',['as'=>'jquery.loadmore','uses'=>'PostController@jqueryLoadMore']);

Step 3: Create FileController

In this step, we will create a file controller in following path app/Http/Controllers.

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Controllers\HomeController;

use App\Post;

class PostController extends HomeController

{

public function jqueryLoadMore(Request $request)

{

$posts=Post::paginate(8);

$html='';

foreach ($posts as $post) {

$html.='<li>'.$post->id.' <strong>'.$post->title.'</strong> : '.$post->description.'</li>';

}

if ($request->ajax()) {

return $html;

}

return view('jqueryLoadmore');

}

}

Step 4: Create Blade File

In this step, we will create a view file within files directory so first create files directory and then create jqueryLoadmore.blade.php directory (resources/views/jqueryLoadmore.blade.php)

resources/views/jqueryLoadmore.blade.php

@extends('layouts.app')

@section('content')

<style>

.wrapper > ul#results li {

margin-bottom: 2px;

background: #e2e2e2;

padding: 20px;

width: 97%;

list-style: none;

}

.ajax-loading{

text-align: center;

}

</style>

<div class="wrapper">

<ul id="results"><!-- results appear here --></ul>

<div class="ajax-loading"><img src="{{ asset('images/loading.gif') }}" /></div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script>

var page = 1; //track user scroll as page number, right now page number is 1

load_more(page); //initial content load

$(window).scroll(function() { //detect page scroll

if($(window).scrollTop() + $(window).height() >= $(document).height()) { //if user scrolled from top to bottom of the page

page++; //page number increment

load_more(page); //load content

}

});

function load_more(page){

$.ajax({

url: '?page=' + page,

type: "get",

datatype: "html",

beforeSend: function()

{

$('.ajax-loading').show();

}

})

.done(function(data)

{

if(data.length == 0){

console.log(data.length);

//notify user if nothing to load

$('.ajax-loading').html("No more records!");

return;

}

$('.ajax-loading').hide(); //hide loading animation once data is received

$("#results").append(data); //append data into #results element

console.log('data.length');

})

.fail(function(jqXHR, ajaxOptions, thrownError)

{

alert('No response from server');

});

}

</script>

@endsection

It will help you....


Recommended Posts