Skip to content

Instantly share code, notes, and snippets.

@FilipQL
Created October 10, 2016 18:51
Show Gist options
  • Save FilipQL/e873d321c3329068f34c58d0083749f9 to your computer and use it in GitHub Desktop.
Save FilipQL/e873d321c3329068f34c58d0083749f9 to your computer and use it in GitHub Desktop.
Infinite Scroll Pagination Using Laravel & jScroll
<?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 --}}
@adeguntoro
Copy link

Thanks, but why it doesn't work with Laravel 5.8 ?

@Xoshbin
Copy link

Xoshbin commented Nov 21, 2019

it doesn't work with Laravel 5.8

@Rewoal
Copy link

Rewoal commented Jun 4, 2020

doesit work laravel 7?

@Slendagh
Copy link

Slendagh commented Sep 21, 2020

doesit work laravel 7?

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 :

  1. export the pagination views with the command: php artisan vendor:publish --tag=laravel-pagination
  2. then change {{ $comments->links() }} to {{ $comments->links("vendor/pagination/default")}}

@Geniue
Copy link

Geniue commented Oct 5, 2020

Sadly A console error : jscroll is not a function
Note: I am using Laravel 7 and just made the steps

export the pagination views with the command: php artisan vendor:publish --tag=laravel-pagination
then change {{ $comments->links() }} to {{ $comments->links("vendor/pagination/default")}}

@Slendagh
Copy link

Slendagh commented Oct 5, 2020

For that you need to check that you're including jquery and jscroll correctly

@maaazzz
Copy link

maaazzz commented Mar 22, 2021

Not working in laravel 7. content is not showing

@fachry1410
Copy link

mas download nya dimana?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment