Created
October 10, 2016 18:51
-
-
Save FilipQL/e873d321c3329068f34c58d0083749f9 to your computer and use it in GitHub Desktop.
Infinite Scroll Pagination Using Laravel & jScroll
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {{-- 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 --}} |
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")}}
For that you need to check that you're including jquery and jscroll correctly
Not working in laravel 7. content is not showing
mas download nya dimana?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 :