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!
Here is a good example of Infinite Scroll in Laravel 5 - http://itsolutionstuff.com/post/how-to-implement-infinite-ajax-scroll-pagination-in-laravel-5example.html
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community