DEV Community

Rafa Rafael
Rafa Rafael

Posted on

4

Implementing Infinite Scroll with Laravel and jQuery

Infinite scroll provides a more modern and fluid way of loading data compared to traditional pagination. Instead of clicking on pagination links, new data is automatically loaded as the user scrolls down the page.

Prerequisites

  • Basic knowledge of Laravel and jQuery.
  • A Laravel project with a model to paginate (e.g., User).

Step 1: Setting Up Laravel for Pagination

First, set up your controller to handle pagination:

// In your UserController
public function index(Request $request)
{
    $users = User::paginate(10); // Paginate the results, 10 per page

    if ($request->ajax()) {
        return view('users.partials.users_list', compact('users'))->render();
    }

    return view('users.index', compact('users'));
}
Enter fullscreen mode Exit fullscreen mode

Step 2: Create the View

Create views to display the paginated data:

resources/views/users/index.blade.php

@extends('layouts.app')

@section('content')
<div id="user-list">
    @include('users.partials.users_list', ['users' => $users])
</div>
<div id="loading" style="text-align:center; display:none;">
    <p>Loading more users...</p>
</div>
@endsection
Enter fullscreen mode Exit fullscreen mode

resources/views/users/partials/users_list.blade.php

@foreach($users as $user)
<tr>
    <td>{{ $user->name }}</td>
    <td>{{ $user->email }}</td>
</tr>
@endforeach
Enter fullscreen mode Exit fullscreen mode

Step 3: Implementing jQuery for Infinite Scroll

Now, modify your jQuery script to support infinite scroll:
public/js/infinite-scroll.js

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

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

    function loadMoreData(page) {
        $.ajax({
            url: '?page=' + page,
            method: 'GET',
            beforeSend: function() {
                $('#loading').show();
            },
            success: function(data) {
                if (data.trim() === "") {
                    return;
                }
                $('#loading').hide();
                $('#user-list').append(data);
            },
            error: function(xhr) {
                console.log(xhr.responseText);
            }
        });
    }
});
Enter fullscreen mode Exit fullscreen mode

Include this script in your main view:

@section('scripts')
<script src="{{ asset('js/infinite-scroll.js') }}"></script>
@endsection`
Enter fullscreen mode Exit fullscreen mode

By implementing infinite scroll with Laravel and jQuery, you can provide a smoother user experience. This approach eliminates the need for pagination links and automatically loads content as the user scrolls.

Enjoy!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
nicolus profile image
Nicolus

I like that you made a simple jQuery version and not just the Vue version : Even though Vue (or maybe Alpine) is a better approach for any sizeable project it's good to know that you can also make a minimal version with just a few lines of javascript.

Come to think of it, it could probably be done almost as easily without jQuery and only native javascript with fetch(), document.getElementById(), and classList.toggle() to change the visibility of the loader.

Collapse
 
rafaelogic profile image
Rafa Rafael

Thanks for the feedback! I’m glad you liked the simple jQuery version. I agree—Vue or Alpine is better for bigger projects, but it’s useful to have a minimal option too. You’re right, it could definitely be done with native JavaScript using fetch(), getElementById(), and classList.toggle(). I’ll keep that in mind!

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay