Laravel × Infinite Scroll で無限スクロールを実装する

今回のお題

以前、このような記事を書きました。
cakePHPのpaginateでinfinite scrollを使った無限スクロール

スピンオフではありませんが、
Laravelでも同じようなことを実装することになりましたので
ぐるぐると備忘録として残していきます。

こういうのは別の技術を使うのも一つの手ではありますが
JSはあえて同じものを使おうと思います。
決して手抜きではない。

Controller

UserContoroller.php

$users = User::getUserByName($nane)->paginate($pageCount);

return view('user.index', compact('users'));

こんな感じでLaravel標準のpaginationで取得するのはCakePHPと変わらないですね。

View(Blade)

resourse/views/user/index.blade.php

<div class="search_result">
    <div class="result_users">
        <p class="number">全{{ $users->total() }}件</p>

        @foreach($users as $user)
            @component('layouts.user.list', ['user' => $user])@endcomponent
        @endforeach
        
        @if ($users->hasMorePages())
        <p class="button more"><a href="{{ $users->nextPageUrl() }}">もっと見る</a></p>
        @endif
    </div>
</div>

componentはユーザー情報を表示する共通レイアウトと考えていただけたらと。
「もっと見る」ボタンは初期表示時に次のページがないときは表示されません。

javaScript

<script src="/js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
    var pageCount = {{ $users->lastPage() }};
    var nowPage = 1;
    $('.result_users').infinitescroll({
        navSelector  : ".more",
        nextSelector : ".more a",
        itemSelector : ".info",
        loading : {
            img : '',
            msgText : 'Now loading....',
            finishedMsg : '',
        },
    },
    function(newElements) {
        var $newElems = $(newElements);
        $("#infscr-loading").remove();
        if (nowPage < pageCount) {
            $(".more").appendTo(".result_users");  
            $(".more").css({display: 'block'});  
        }
        nowPage++;
    });
    
    // クリックでスクロールさせるためinfinitescrollをunbind
    $('.result_users').infinitescroll('unbind');
    // クリック時の動作
    $('.more a').click(function(){
        $('.result_users').infinitescroll('retrieve');
        return false;
    });
</script>

itemSelectorにある.infoは表示するユーザー情報の大枠がそうなっている、
とお考えください。

今回も無限スクロールと言いながら、「もっと見る」をクリックして続きを表示されるようにしています。
ノークリックでスクロールしたら次が表示されるようにするには
// クリックでスクロールさせるためinfinitescrollをunbind
以下のスクリプトを削除すれば実現できるはずです。