<?php | |
// For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll | |
namespace App\Http\Controllers\InfiniteScrolling; | |
use App\Comment; | |
use Illuminate\Http\Request; | |
use App\Http\Requests; | |
use App\Http\Controllers\Controller; | |
class CommentController extends Controller | |
{ | |
/** | |
* Display a listing of the resource. | |
* | |
* @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View | |
*/ | |
public function index() | |
{ | |
$comments = Comment::latest()->paginate(7); | |
return view('comments.index', compact('comments')); | |
} | |
} | |
// For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll |
{{-- For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll --}} | |
<!doctype html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<meta charset="UTF-8"> | |
<title>Laravel and jScroll - Infinite Scrolling</title> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-6 col-md-offset-3"> | |
<h1 class="page-header">Comments</h1> | |
@if (count($comments) > 0) | |
<div class="infinite-scroll"> | |
@foreach($comments as $comment) | |
<div class="media"> | |
<a class="pull-left" href="#"> | |
<img class="media-object" width="64" height="64" src="/images/avatar.png" alt=""> | |
{{-- MAKE SURE THAT YOU PUT THE CORRECT IMG PATH FOR AVATARS --}} | |
</a> | |
<div class="media-body"> | |
<h4 class="media-heading">{{ $comment->author_name }} | |
<small>{{ $comment->created_at->diffForHumans() }}</small> | |
</h4> | |
{{ $comment->body }} | |
<br> | |
<span class="pull-right"> | |
<i id="like1" class="glyphicon glyphicon-thumbs-up" style="color: #1abc9c; cursor: pointer;"></i> | |
{{ rand(0, 200) }} | |
<i id="dislike1" class="glyphicon glyphicon-thumbs-down" style="color: #e74c3c; cursor: pointer;"></i> | |
{{ rand(0, 50) }} | |
</span> | |
</div> | |
</div> | |
<hr> | |
@endforeach | |
{{ $comments->links() }} | |
</div> | |
@endif | |
</div> | |
<div class="col-md-12 text-center"> | |
<small><a href="http://laraget.com" class="text-muted">Filip Zdravkovic - Laraget.com</a></small> | |
</div> | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
<script src="/js/jquery.jscroll.min.js"></script> | |
{{-- MAKE SURE THAT YOU PUT THE CORRECT PATH FOR jquery.jscroll.min.js --}} | |
<script type="text/javascript"> | |
$('ul.pagination').hide(); | |
$(function() { | |
$('.infinite-scroll').jscroll({ | |
autoTrigger: true, | |
loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />', // MAKE SURE THAT YOU PUT THE CORRECT IMG PATH | |
padding: 0, | |
nextSelector: '.pagination li.active + li a', | |
contentSelector: 'div.infinite-scroll', | |
callback: function() { | |
$('ul.pagination').remove(); | |
} | |
}); | |
}); | |
</script> | |
</body> | |
</html> | |
{{-- For more details see: http://laraget.com/blog/implementing-infinite-scroll-pagination-using-laravel-and-jscroll --}} |
This comment has been minimized.
This comment has been minimized.
Thank you |
This comment has been minimized.
This comment has been minimized.
@modestguy, you could count the number of items, and then divide by what you set your pagination is. So if you have 100 items, with 30 results per page, you'd know you're on page 3. That's how I would do it, as there's no real need for "pages" once you've got infinite scroll, the word "page" becomes redundant because it's just 1 long list. Just my 2c |
This comment has been minimized.
This comment has been minimized.
Hello, in my case only the gif loads and after that nothing happens although my pagination is correct and i checked it. |
This comment has been minimized.
This comment has been minimized.
why it's resizing my div ? when i use this lib my div is change to small ... |
This comment has been minimized.
This comment has been minimized.
Thanks, but why it doesn't work with Laravel 5.8 ? |
This comment has been minimized.
This comment has been minimized.
it doesn't work with Laravel 5.8 |
This comment has been minimized.
This comment has been minimized.
doesit work laravel 7? |
This comment has been minimized.
This comment has been minimized.
yes it does, but you'll have to change the pagination view in the links function, because laravel 7 uses bootstrap as its default pagination view which doesn't have a ul with a class named 'pagination'. So you'll need to :
|
This comment has been minimized.
This comment has been minimized.
Sadly A console error : jscroll is not a function
|
This comment has been minimized.
This comment has been minimized.
For that you need to check that you're including jquery and jscroll correctly |
This comment has been minimized.
Hi! How about current page number? is there any way to get current page num and display it like $('#my_div').html(currentPageNum)? And what about navigation?