AJAX lazy loading listing for laravel/jquery project

You always have count in returned data.

https://laravel.com/docs/5.7/eloquent-relationships#lazy-eager-loading

Are you looking for something like here in Laracast ?

Example : https://laracasts.com/discuss/channels/general-discussion/where-are-you-all-from

Yes, how could it be implemented with laravel 5.7/jquery 3 / blade?

I'm not sure you have something standard in datatables.

You can try another library such as : https://infinite-scroll.com/

I tried to make infinite scrolling functionality with https://github.com/metafizzy/infinite-scroll plugin in my ( jquery-3.3.1 / Infinite Scroll PACKAGED v3.0.5 ) application I implemented infinite-scroll functionality looking at demo https://codepen.io/desandro/pen/WOjqNM I search if there is a way to implement infinite-scroll with data in bootstrap responsive table? That must be infinite scrolling data of rows in backend part of application. I tried to make like :

                <div class="table-responsive">
                    <table class="table table-bordered table-striped text-primary">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Name</th>
                            <th>Location</th>
                            <th>Level count</th>
                            <th>Created At</th>
                            <th>Updated At</th>
                            <th></th>
                            <th></th>
                        </tr>
                        </thead>
                    </table>



                    <tbody id="infinite_scroll_container">
                    <tr class="warehouses-listing-append-block">
                        <td>Id</td>
                        <td>Name</td>
                        <td>Location</td>
                        <td>Level count</td>
                        <td>Created At</td>
                        <td>Updated At</td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>


                    <div class="warehouses-listing-load-status-block">
                        <div class="loader-ellips infinite-scroll-request">
                            <span class="loader-ellips__dot"></span>
                            <span class="loader-ellips__dot"></span>
                            <span class="loader-ellips__dot"></span>
                            <span class="loader-ellips__dot"></span>
                        </div>
                        <p class="infinite-scroll-last">End of content</p>
                        <p class="infinite-scroll-error">No more pages to load</p>
                    </div>


                </div>

            </div>

In js init function with code :

    var infScroll = new InfiniteScroll( '#infinite_scroll_container', {
        path: function() {
            return '/admin/get-warehouses-listing/' + ( ( this.loadCount + 1 ) * this_rows_per_scroll_step );
        },
        append: '.warehouses-listing-append-block',
        status: '.warehouses-listing-load-status-block',
    )

But I got JS error in console :

infinite-scroll.pkgd.min.js:12 Bad element for InfiniteScroll: #infinite_scroll_container

1. If there is a way to use table here?
2. Can similar functionality of table (horizontal scrolling with header row ) be implemented with other tag, not table ?

Thanks!

If there is some other JS bootstrap campatible lib with infinite-scroll functionality for responsive table?