4

簡単なことをする関数を書きたいです。10 ページのデータがあり、各ページには 20 のレコードがあります。ユーザーがページ 1 の一番下に移動してLoad Moreをクリックすると、ページ 2 のデータをロードし、これらのデータをページ 1 の表示データに追加します。

私はinfinitescrollというjqueryプラグインを見つけました。新しいデータを追加できないことを除いて、私にとってはうまくいきます。

私のHTML：

<html>

<head>
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery.infinitescroll.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            console.log({
                {
                    $p - > getCurrentPage()
                }
            });
            var $container = $('#masonny-div');
            $container.infinitescroll({
                loading: {
                    msg: null,
                    msgText: "<em>Loading the next set of posts...</em>",
                    speed: 'fast',
                },
                navSelector: "#next",
                nextSelector: "#next a",
                itemSelector: "#masonny-div",
            });
        });
    </script>
</head>

<body>
    <div id='masonny-div'>
        @foreach ($p as $x)
        <div class="item">{{$x -> name}}</div>
        @endforeach
    </div>
    <br>
    <div id="next">
        <a href="{{$p->getUrl($p->getCurrentPage() + 1)}}">Next</a>
    </div>
</body>

</html>

次のページへのリンクは次のとおりです。$p->getUrl($p->getCurrentPage() + 1

クリックするたびに次のページのデータを取得しますが、それを最後のページに追加するにはどうすればよいですか?

コールバック関数を呼び出そうとしましたが、機能していません。コンソールにメッセージはありません。

var $container = $('#masonny-div');
$container.infinitescroll({
    loading: {
        msg: null,
        msgText: "<em>Loading the next set of posts...</em>",
        speed: 'fast',
    },
    navSelector: "#next",  
    nextSelector: "#next a",  
    itemSelector: "#masonny-div",             
}, function(data){
    console.log('I am here!');
    console.log(data);
});

どんな情報でも大歓迎です、ありがとう。

4

3 に答える 3

2

最新バージョンを使用していますか？

https://github.com/paulirish/infinite-scroll

新しいオプションがあると思います：

appendCallback: true
于 2013-11-13T06:13:31.213 に答える
1

別の「itemSelector」を使用してみてください。そんな感じ：

   $container.infinitescroll({
        loading: {
            msg: null,
            msgText: "<em>Loading the next set of posts...</em>",
            speed: 'fast',
        },
        navSelector: "#next",
        nextSelector: "#next a",  
        itemSelector: "#masonny-div div.item",             
    });
于 2013-11-15T10:25:37.843 に答える