Infinite scroll on a table [L5]

posted 9 years ago

Hello,

a few months ago, I successfully implemented Infinite Scroll in Laravel 5 using this tutorial:

http://wern-ancheta.com/blog/2015/03/01/how-to-implement-scroll-in-laravel/

Now I want to do this again, but this time with table rows. That means that a <table> must be expanded with extra rows when scrolling down. So far I have this:

Controller:

public function getArticles() {
    $articles = Article::select('title', 'datetime')->paginate(20);

    return view('show_articles')
         ->with('articles', $articles);
}

View:

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

JavaScript:

(function(){

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

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

When running this and scrolling down, I see it's trying to load new table rows but nothing happens. Can anyone tell what's going wrong here?

Thanks in advance.

Last updated 3 years ago.

php-it

replied 9 years ago

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 9 years ago.