jQuery load more data on scroll

  • 17-04-2022
  • 1548
  • Jquery
  • Haresh Chauhan

Hello, Developer

webappfix is happy to come here to learn we hope that you will learn for what reason to come here.

You can use this module easily integrate into your web and project. If you use this module then your projects user experience is good in this module.

jQuery load more data on the scrolling module is the best part of the pagination.

You can set this module into your web page and project then you are a really good module in your project.

jQuery scroll to load more data is when you scroll your web page at that time jQuery call the function and request to Ajax for load data from the server and append data in your web page it is very helpful when your website has lot's of data it makes easy to load your website whenever the user opens your site at a time only a single page load from your server to it easy to load and open and while user scroll page that time load more data from your server.

What are the benefits of Scroll To load more data?

  • It makes your site smooth.
  • Make less load to your server.
  • Up to speed to open your site.
  • You can make the site on a single page.
  • Less code have to write.
  • No need to page refresh.

Following steps

  • Create your Project.
  • Configuration Database.
  • Html and jQuery Code.
  • Create Route.
  • Make Controller.
  • Data Base Model.
  • Load Data blade file.

So, Here I will guide you step by step how you can integrate module in your web page and project. Here You need to follow the below step and get this module in your projects.

Step 1 : Clone Fresh Laravel Application.

In the 1st step we need to clone a fresh laravel application.

composer create-project --prefer-dist laravel/laravel Loaddata

Skeleton Screen Loading Effect

Step 2 : Configuration Database.

Here we need to configuration database in .env file

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Load_data
DB_USERNAME=root
DB_PASSWORD=

Step 3 : Create blade file and follow the code

After the database configuration, we need to create a blade file in your project like below for example copy and paste.

resources/views/index.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Scroll To load Data</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<section>
    <div class="container mt-3">
        <table class="table table-dark">
            <thead>
                <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Address</th>
                </tr>
            </thead>
            <tbody id="load-data">
                @foreach($data as $val) 
                <tr>
                    <td>{{ $val->name }}</td>
                    <td>{{ $val->email }}</td>
                    <td>{{ $val->address }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div class="loader text-center" style="display: none;">
            <img src="https://www.webappfix.com/public/img/Spinner.gif">
            Loading More Data
        </div>
    </div>
</section>
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- bootstrap -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    var page = 1;

    $(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            page++;
        loadData(page);
        }   
    });

    function loadData(page){
    
        $.ajax({
            url: '?page=' + page,
            type: 'get',
            beforeSend: function() {
                $('.loader').show();
            }
        })
        .done(function(data) {

            if (data.html == " ") {
                alert('no data found');
                return;
            }
            $("#load-data").append(data.html);
        })
        .fail(function() {
            alert('server not responding...');
        })
    }    
});
</script>
</body>
</html>

Step 4 : Create Route

in this step, we need to add routes in routes/web.php file. So, let's do that.

routes/web.php

Route::get('/','LoadController@index')->name('index');
Route::get('/load/data','LoadController@loadData')->name('load.data');

jQuery Lazy Load

Step 5 : Make Controller

Now, we have to make a controller. So, copy below command and open your terminal and command prompt and fire following command. 

php artisan make:controller LoadController

After the create controller we copy the following Loadcontroller code and paste your controller.

app/Http/Controllers/LoadController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\UserData;
class LoadController extends Controller
{
    public function index(Request $request)
   {
        $this->userModel = new UserData;
        $data = $this->userModel->getData();

         if ($request->ajax()) {
         $view = view('load_more',compact('data'))->render();
         return response()->json(['html'=>$view]);
         }
       return view('load',compact('data'));
    }
}

Step 6 : Create Migration

In this step, we create one migration to create a table, So follow the below command.

php artisan make:migration create_user_data_table

database/migrations/your migration file.php

<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTestsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('user_data', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('email');
            $table->longtext('address');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('user_data');
    }
}

Laravel Intervention Image

Step 7 : Make a model.

In the 6th step, we need to create a model for getting data from the database.

Fire below command on your terminal or command prompt and get model.

php artisan make:model UserData

After the make model, we follow below code.

app/UserData.php

<?php

namespace App;
use Illuminate\Database\Eloquent\Model;

class UserData extends Model
{
    protected $table = 'user_data';
    protected $fillable = ['name','email','address'];

    public function getData()
    {
      return static::orderBy('id')->paginate(15);
    }
}

Step 8 : Create Load Data File.

In this last step, we use to create one blade file for data appended when scrolling screen So, let's create it.

resources/views/load_more.blade.php

@foreach($data as $val)
<tr>
    <td>{{ $val->name }}</td>
    <td>{{ $val->email }}</td>
    <td>{{ $val->address }}</td>
</tr>
@endforeach

I hope it can help you...

Thanks...

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :