Skip to content

Instantly share code, notes, and snippets.

@FilipQL

FilipQL/CommentController.php

Created Oct 10, 2016
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Infinite Scroll Pagination Using Laravel & jScroll
Raw
CommentController.php
<?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
Raw
index.blade.php
{{-- 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 --}}
@modestguy

This comment has been minimized.

Sign in to view
Copy link

@modestguy modestguy commented Sep 20, 2017

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?
@Ademking

This comment has been minimized.

Sign in to view
Copy link

@Ademking Ademking commented Jul 2, 2018

Thank you ♥
@kingsloi

This comment has been minimized.

Sign in to view
Copy link

@kingsloi kingsloi commented Aug 13, 2018

@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
@Naveedali1234

This comment has been minimized.

Sign in to view
Copy link

@Naveedali1234 Naveedali1234 commented Nov 21, 2018

Hello, in my case only the gif loads and after that nothing happens although my pagination is correct and i checked it.
@robyfirnandoyusuf

This comment has been minimized.

Sign in to view
Copy link

@robyfirnandoyusuf robyfirnandoyusuf commented Mar 29, 2019

why it's resizing my div ? when i use this lib my div is change to small ...
@adeguntoro

This comment has been minimized.

Sign in to view
Copy link

@adeguntoro adeguntoro commented Aug 6, 2019

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

This comment has been minimized.

Sign in to view
Copy link

@Xoshbin Xoshbin commented Nov 21, 2019

it doesn't work with Laravel 5.8
@Rewoal

This comment has been minimized.

Sign in to view
Copy link

@Rewoal Rewoal commented Jun 4, 2020

doesit work laravel 7?
@Slendagh

This comment has been minimized.

Sign in to view
Copy link

@Slendagh Slendagh commented Sep 21, 2020 •
edited

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

This comment has been minimized.

Sign in to view
Copy link

@Geniue 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

This comment has been minimized.

Sign in to view
Copy link

@Slendagh Slendagh commented Oct 5, 2020

For that you need to check that you're including jquery and jscroll correctly
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment