On Page Scroll Load More Data Through Ajax In Laravel

Posted By Bajarangi soft , Posted On 13-01-2021

how to load more data on page scroll in laravel with ajax

Step 1 : Install Laravel using the following command.

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

Step 2 : After Installation, Run the command in terminal to make auth

php artisan make:auth

Step 3 : After users registration , create a controller as HomeController

php artisan make:controller HomeController

Step: 4 Create a view file for display the data.
Before we create a view file, we need to add one route inside the web.php.

Route::get('load_users', 'HomeController@load_users');

Now, create a view file called load_users.blade.php file. Add the following code.

@extends('layouts.app')
@section('content')
    <div class="col-md-12 table_center">
        <div class="col-md-10">
            <h1 class="text-center">Users Table</h1>
            <table class="table table-striped">
                <thead>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                </thead>
                <tbody>
                @if(count($users) > 0)
                @foreach($users as $user)
                    <tr>
                        <td>{{$user->id}}</td>
                        <td>{{$user->name}}</td>
                        <td>{{$user->email}}</td>
                    </tr>
                @endforeach
                <tr id="remove-row">
                    <td></td>
                    <td></td>
                    <td>
                        <img src="{{asset('images/Loading_icon.gif')}}" style="width: 100px;height: 80px">
                        <input type="hidden" value="{{$user->id}}" id="user_id">
                    </td>
                </tr>
                @else
                    <h1>No Users Found</h1>
                @endif
                </tbody>
            </table>
            <h1 class="load_data text-center"></h1>
        </div>
    </div>
@endsection

Now, add the code inside the load_users() function of HomeController.php file.

public function load_users(){
    $users = User::limit(10)->get();
    return view('load_users', compact('users'));
}

Step: 5 Add load more data script inside app.blade.php file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    $(window).scroll(function(){
        var id = $('#user_id').val();
        if($(window).scrollTop() + $(window).height() >= $(document).height()){
            $.ajax({
                url : '{{url("load_more")}}',
                method : "GET",
                data : {id:id, _token:"{{csrf_token()}}"},
                dataType : "text",
                success : function (data)
                {
                    if(data != '')
                    {
                        $('#remove-row').remove();
                        $('table tbody').append(data);
                    }
                    else
                    {
                        $('#remove-row').remove();
                        $('.load_data').html("No Data");
                    }
                }
            });
        }
    });
</script>

Now, we need to add one route inside the web.php.

Route::get('load_more', 'HomeController@load_more');

Now, add the code inside the load_more() function of HomeController.php file.

public function load_more(Request $request)
{
    $output = '';
    $id = $request->id;
    $users = User::where('id','>',$id)->limit(3)->get();
    if(!$users->isEmpty())
    {
        foreach($users as $user)
        {
            $output .= '<tr>
                    <td>'.$user->id.'</td>
                    <td>'.$user->name.'</td>
                    <td>'.$user->email.'</td>
                </tr>';
        }
        $output .= ' <tr id="remove-row">
                <td></td>
                <td></td>
                <td>
                    <img src="'.asset('images/Loading_icon.gif').'" style="width: 100px;height: 80px">
                    <input type="hidden" value="'.$user->id.'" id="user_id">
                </td>
            </tr>';
        echo $output;
    }
}