Skip to content

Instantly share code, notes, and snippets.

@daiki44

daiki44/ScrollController.php

Last active February 27, 2018 22:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save daiki44/f57e511a3d4db88f86ccb538b083f7c6 to your computer and use it in GitHub Desktop.
Save daiki44/f57e511a3d4db88f86ccb538b083f7c6 to your computer and use it in GitHub Desktop.
Download ZIP
LaravelとjScrollで、Infinite Scrollをやってみた ref: https://qiita.com/daiki_44/items/16ece4c9be9f41bf78cb
Raw
ScrollController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use App\Post;
class PostController extends Controller
{
public function scroll()
{
$post_list = Post::orderBy('post_no')->paginate(15);
return view('scroll', compact('post_list'));
}
}
Raw
scrollView.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<title>LaravelとjScrollで、Infinite Scrollをやってみた</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscroll/2.3.9/jquery.jscroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.pagination').hide();
$('#infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<div class="col-xs-12 text-center"><i class="zmdi zmdi-spinner zmdi-hc-spin zmdi-hc-3x"></i></div>',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: '#infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>
<div class="container">
<div id="infinite-scroll">
<ul>
@forelse ($post_list as $post)
<li>
<b>[{{$post->title}}]</b>
<br>
{{$post->content}}
</li>
@empty
<li>投稿はまだありません。</li>
@endforelse
</ul>
{{$post_list->links()}}
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment