scroll pagination.js資料重複載入、分頁問題

eedc發表於2016-11-18
JS

scroll pagination.js資料重複載入、分頁問題 解決辦法

 

參考資料：

http://blog.csdn.net/dyw442500150/article/details/17532425

http://bbs.csdn.net/topics/390624732?locationNum=8

 

解決資料重複載入，加鎖機制，修改源JS檔案為：

/*
**    Anderson Ferminiano
**    contato@andersonferminiano.com -- feel free to contact me for bugs or new implementations.
**    jQuery ScrollPagination
**    28th/March/2011
**    http://andersonferminiano.com/jqueryscrollpagination/
**    You may use this script for free, but keep my credits.
**    Thank you.
*/

(function ($) {


    $.fn.scrollPagination = function (options) {

        var opts = $.extend($.fn.scrollPagination.defaults, options);
        var target = opts.scrollTarget;
        if (target == null) {
            target = obj;
        }
        opts.scrollTarget = target;

        return this.each(function () {
            $.fn.scrollPagination.init($(this), opts);
        });

    };

    $.fn.stopScrollPagination = function () {
        return this.each(function () {
            $(this).attr('scrollPagination', 'disabled');
        });

    };

    $.fn.scrollPagination.loadContent = function (obj, opts) {
        var target = opts.scrollTarget;
        var mayLoadContent = $(target).scrollTop() + opts.heightOffset >= $(document).height() - $(target).height();
        //根據mayLoadContent 和 lock兩個引數進行判斷  
        if (mayLoadContent && opts.lock) {
            if (opts.beforeLoad != null) {
                opts.beforeLoad();
            }
            //載入資料的時候把lock設為false  
            opts.lock = false;
            $(obj).children().attr('rel', 'loaded');
            $.ajax({
                type: 'POST',
                url: opts.contentPage,
                data: opts.contentData,
                success: function (data) {
                    //載入成功後把lock設為true，可以進行下一次request  
                    opts.lock = true;
                    $(obj).append(data);
                    var objectsRendered = $(obj).children('[rel!=loaded]');

                    if (opts.afterLoad != null) {
                        opts.afterLoad(objectsRendered);
                    }
                },
                dataType: 'html'
            });
        }

    };

    $.fn.scrollPagination.init = function (obj, opts) {
        var target = opts.scrollTarget;
        $(obj).attr('scrollPagination', 'enabled');

        $(target).scroll(function (event) {
            if ($(obj).attr('scrollPagination') == 'enabled') {
                $.fn.scrollPagination.loadContent(obj, opts);
            }
            else {
                event.stopPropagation();
            }
        });

        $.fn.scrollPagination.loadContent(obj, opts);

    };

    $.fn.scrollPagination.defaults = {
        'contentPage': null,
        'contentData': {},
        'beforeLoad': null,
        'afterLoad': null,
        'scrollTarget': null,
        'heightOffset': 0,
        //新增lock機制，如果資料載入完了，則lock為true，可以載入下一組資料，如果資料沒有載入完，則lock為false，等到資料載入完成了為true。  
        'lock': true
    };
})(jQuery);

分頁問題，主要在頁數傳遞：

在afterLoad()函式中更新post引數的值：
this.contentData.pageindex = c;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery ScrollPagination</title>

    <script src="~/jspm/scripts/jquery.js"></script>
    <script src="~/jspm/scripts/scrollpagination.js"></script>
    <link href="~/jspm/scrollpagination_demo.css" rel="stylesheet" />





    <meta name="author" content="Anderson Ferminiano" />
    <meta name="keywords" content="jquery, plugin, anderson ferminiano, scroll, pagination, scroll pagination, html5" />
    <script type="text/javascript">
        $(function () {
            var c = 1;
            $('#content').scrollPagination({
                'contentPage': '/home/getjson', // the url you are fetching the results
                'contentData': { pageindex: c }, // these are the variables you can pass to the request, for example: children().size() to know which page you are
                'scrollTarget': $(window), // who gonna scroll? in this example, the full window
                'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
                'beforeLoad': function () { // before load function, you can display a preloader div
                    $('#loading').fadeIn();
                },
                'afterLoad': function (elementsLoaded) { // after loading content, you can use this function to animate your new elements
                    $('#loading').fadeOut();
                    c++;
                    this.contentData.pageindex = c;
                    $(elementsLoaded).fadeInWithDelay();
                    if ($('#content').children().size() > 35 ) { // if more than 100 results already loaded, then stop pagination (only for testing)
                        $('#nomoreresults').fadeIn();
                        $('#content').stopScrollPagination();
                    }
                }

            });

            // code for fade in element by element
            $.fn.fadeInWithDelay = function () {
                var delay = 0;
                return this.each(function () {
                    $(this).delay(delay).animate({ opacity: 1 }, 200);
                    delay += 100;
                });
            };

        });
    </script>
</head>
<body>
    <div id="scrollpaginationdemo">
        <div class="about">
            <h1>jQuery ScrollPagination - <a href="http://www.twitter.com/andferminiano" target="_blank">andferminiano</a></h1>
            <p>Official post in my <a href="http://www.andersonferminiano.com/blog/2012/07/jquery-scroll-pagination/" target="_blank">blog</a></p>
            <p>jQuery ScrollPagination plugin has been developed by <a href="http://www.andersonferminiano.com" target="_blank">Anderson Ferminiano</a> for studying purposes, you may use it for free in any project you want, please maintain the credits.</p>
        </div>
        <div class="about">
            <h1>Sources</h1>
            <p><a href="https://github.com/andferminiano/jquery-scroll-pagination" target="_blank">Github me!</a></p>
            <p>Click <a href="jqueryscrollpagination.zip" target="_blank">here</a> to download the full source with demo (.zip format).</p>
        </div>
        <div class="about">
            <h1>Example</h1>
            <textarea readonly="readonly">
                $(function(){
                $('#content').scrollPagination({
                'contentPage': 'democontent.html', // the url you are fetching the results
                'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
                'scrollTarget': $(window), // who gonna scroll? in this example, the full window
                'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
                'beforeLoad': function(){ // before load function, you can display a preloader div
                $('#loading').fadeIn();
                },
                'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
                $('#loading').fadeOut();
                var i = 0;
                $(elementsLoaded).fadeInWithDelay();
                if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
                $('#nomoreresults').fadeIn();
                $('#content').stopScrollPagination();
                }
                }
                });

                // code for fade in element by element
                $.fn.fadeInWithDelay = function(){
                var delay = 0;
                return this.each(function(){
                $(this).delay(delay).animate({opacity:1}, 200);
                delay += 100;
                });
                };

                });
            </textarea>
        </div>
        <ul id="content" nextpage='1'>
            <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum elementum felis. Quisque porta turpis nec eros consectetur lacinia. Pellentesque sagittis adipiscing egestas. </p></li>
            <li><p>Aliquam dapibus tincidunt odio. Phasellus volutpat dui nec ante volutpat euismod. </p></li>
            <li><p>Phasellus vehicula turpis nec dui facilisis eget condimentum risus ullamcorper. Nunc imperdiet, tortor ultrices aliquam eleifend, nisl turpis venenatis dui, at vestibulum magna tellus in tortor. </p></li>
            <li><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris tincidunt nisi in tortor tincidunt ut ullamcorper lectus dapibus.  </p></li>
            <li><p>Aenean interdum dui vitae purus molestie nec placerat nibh semper. Maecenas ultrices elementum dapibus. Aenean feugiat, metus in mattis mattis, justo nisi dignissim libero, ac volutpat dui nibh quis metus.</p></li>
            <li><p> Morbi eget tristique dui. Vivamus nec turpis eu nisi euismod accumsan sed in tortor. Maecenas laoreet leo ut tortor viverra facilisis.</p></li>
        </ul>
        <div class="loading" id="loading">Wait a moment... it's loading!</div>
        <div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
    </div>
</body>
</html>

 

相關文章