11

laravel のページネーションと無限スクロールについて質問があります。

まず第一に、私はこれを持っています:

<div class="row">   

<div id="boxes">

    @forelse($duels->results as $d)

        <div class="col-span-4 box notizy">

            @include('versus.versus')

        </div>



    @empty



    @endforelse

</div>

<div class="col-span-12">
    <div class="paginate text-center">
        {{$duels->links()}}
    </div>
</div>

ご覧のとおり、divs .box を含む div #boxes があります。ページネーションは Laravel によって設定され、次のようになります。

<div class="col-span-12">
    <div class="paginate text-center">
        <div class="pagination">
            <ul>
                <li class="previous_page disabled"><a href="#">&laquo; Previous</a></li>
                <li class="active"><a href="#">1</a></li> <li><a href="index.php?page=2">2</a></li>
                <li class="next_page"><a href="index.php?page=2">Next &raquo;</a></li>
            </ul>
            </div>      
      </div>
</div>

そこで、ページネーションの代わりに無限スクロールを入れたいと思います。https://github.com/paulirish/infinite-scrollを使用するにはどうすればよいですか?

質問があればここにいます！

PS：いくつか試してみましたが、どれもうまくいきませんでした：

    $('#boxes').infinitescroll({
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        msg: null,
        msgText: "<em>Loading the next set of posts...</em>",
        selector: null,
        speed: 'fast',
        start: undefined
    },
    state: {
        isDuringAjax: false,
        isInvalidPage: false,
        isDestroyed: false,
        isDone: false, // For when it goes all the way through the archive.
        isPaused: false,
        currPage: 1
    },
    debug: false,
    behavior: undefined,
    binder: $(window), // used to cache the selector for the element that will be scrolling
    nextSelector: "div.paginate li.active a",
    navSelector: "div.paginate",
    contentSelector: null, // rename to pageFragment
    extraScrollPx: 0,
    itemSelector: "div.notizy",
    animate: false,
    pathParse: undefined,
    dataType: 'html',
    appendCallback: true,
    bufferPx: 40,
    errorCallback: function () { },
    infid: 0, //Instance ID
    pixelsFromNavToBottom: undefined,
    path: undefined, // Can either be an array of URL parts (e.g. ["/page/", "/"]) or a function that accepts the page number and returns a URL
    prefill: false, // When the document is smaller than the window, load data until the document is larger or links are exhausted
    maxPage:undefined // to manually control maximum page (when maxPage is undefined, maximum page limitation is not work)
});

githubページの例に基づいています（および置換する必要があるものを置換します）が、そうしても効果はまったくありません。

4

3 に答える 3

18

私は解決策を見つけました（あなた、未来の人々のために）：

$('#boxes').infinitescroll({
    navSelector     : ".paginate",
    nextSelector    : ".paginate a:last",
    itemSelector    : ".box",
    debug           : false,
    dataType        : 'html',
    path: function(index) {
        return "?page=" + index;
    }
}, function(newElements, data, url){

    var $newElems = $( newElements );
    $('#boxes').masonry( 'appended', $newElems, true);

});

これは次の理由で機能します。

  • laravel 4 によって与えられたページネーションは、前に見たようなものです
  • laravel のページネーションは ....?page=x のような URL を与えます

重要

発生するバグは次のとおりです。

最後のページを超えて下にスクロールすると、最後のページが何度も何度も表示され、本当に無限のスクロールが発生することに気付くでしょう。

これを修正するには、paginator.php (laravel フォルダー内) に移動し、次のように変更します。

if (is_numeric($page) and $page > $last = ceil($total / $per_page))
    {
        return Response::error('404');
    }

いつか誰かを助けることを願っています！

于 2013-05-10T20:25:07.887 に答える
2

このソリューションを提供してくれた Pretty Good Pancake に感謝します。ただし、Laravel 4 では、Response Facade に error() メソッドがなくなったため、App::abort('404', '...')orのようなものResponse::make('...', 404)が機能すると思います。use Illuminate\Support\Facades\..ファイルには名前空間が付けられているため、ファイルに を追加することを忘れないでください。

これを行うためのよりクリーンな方法は、おそらく Paginator クラスを自分で拡張し、getCurrentPage 関数を実装することだと思います。そうすればphp composer.phar update、ベンダー ディレクトリ内のファイルを上書きする可能性のある を実行しても、変更が消去されることはありません。

于 2013-09-17T10:19:20.727 に答える