Support the ongoing development of Laravel.io →
Eloquent Views
Last updated 1 year ago.
0
Solution

I found a working solution! Let me share it for everyone who is looking for an infinite scroll-table in Laravel 5.

First, I simplified the table by removing unnecessary elements. The table and pagination now looks like this:

View:

<table class="table">
  <thead>
    <tr>
      <th>Title</th>
      <th>Datetime</th>
    </tr>
  </thead>
  <tbody>
    @foreach($articles as $article)
    <tr id="article-item">
      <td>{{ $article['title'] }}</td>
      <td>{{ $article['datetime'] }}</td>
    </tr>
    @endforeach
  </tbody>
</table>
<div id="pagination">{!! $articles->render()) !!}</div>

You might want to hide the pagination <div> by doing something like:

<div id="pagination" style="display: none">{!! $articles->render() !!}</div>

After that, I modified the JavaScript to work with the table:

JavaScript:

(function(){

    var loading_options = {
        finishedMsg: "End of rows",
        msgText: "Loading new rows...",
        img: "/assets/img/ajax-loader.gif"
    };

    $('table.table tbody').infinitescroll({
      loading : loading_options,
      navSelector : "#pagination .pagination",
      nextSelector : "#pagination .pagination li.active + li a",
      itemSelector : "#article-item"
    });
})();

Now it should work and the table will be automatically expanded when the end of the page is reached. The table columns may float for a second while loading new items. This is because the plugin is shortly displaying a div inside the <tbody>, letting the user know that new records are being loaded. I solved this by making a small modification to the plugin core:

jquery.infinitescroll.min.js:

s.loading.msg = s.loading.msg || e('<tr><div id="infscr-loading"><img alt="Loading..." src="' + s.loading.img + '" /><div>' + s.loading.msgText + "</div></div></tr>");

According to the documentation, <div id="infscr-loading"> is the loading div. To make ik work nice within the tabe, I wrapped this div inside a <tr> element to make sure it will be displayed properly.

All works fine now!

Last updated 8 years ago.
0

It's not working and total waste of time....

0

Here is a good example of Infinite Scroll in Laravel 5 - http://itsolutionstuff.com/post/how-to-implement-infinite-ajax...

0

Sign in to participate in this thread!

Eventy

Your banner here too?

php-it php-it Joined 22 Nov 2014

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2024 Laravel.io - All rights reserved.