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>

scroll pagination.js数据重复加载、分页问题的更多相关文章

  1. jquery.pagination.js数据无刷新真分页

    定义一个全局的分页加载变量,并设置为true: var __isReSearch=true; 定义分页的一些数据: var __PageSize = 10; var __SearchCondition ...

  2. Spring+Mybatis+jQuery.Pagination.js异步分页及JsonConfig的使用

    在开发工作中经常用到异步分页,这里简单整理一下资料. 一.Controller方法 package com.lwj.controller; import javax.servlet.http.Http ...

  3. jquery.pagination.js分页

    参数说明 参数名 描述 参数值 maxentries 总条目数                           必选参数,整数 items_per_page 每页显示的条目数            ...

  4. 无刷新分页 jquery.pagination.js

     无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...

  5. (推荐)jquery.pagination.js分页

    序言 本来想自己对这个分页使用做一些总结的,但发现大神们已经总结的很好了.所以给推荐一下. 转自:http://www.cnblogs.com/knowledgesea/archive/2013/01 ...

  6. ajax分页实现，jquery.pagination.js

    1.前台使用ajax无刷新分页,主要需要生成分页的工具条,这里使用的是jquery.pagination.js 插件参数可以参考----张龙豪-jquery.pagination.js分页 下面贴出代 ...

  7. Spring Data Jpa+SpringMVC+Jquery.pagination.js实现分页

    本博客介绍基于Spring Data这款orm框架加上Jquery.pagination插件实现的分页功能. 介绍一下Spring Data框架 spring Data : Spring 的一个子项目 ...

  8. 分页插件 jquery.pagination.js

    引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...

  9. 使用jQuery的分页插件jquery.pagination.js进行分页

    1,需要用到jquery.pagination.js和pagination.css https://pan.baidu.com/s/1G3PLQSRGjvLxl2ryqpV76w https://pa ...

随机推荐

  1. ajax的来龙去脉

    这是我在博客园写的第一遍博客,之前都是只看不写,在园子里学到了不少的东西,现在也想着把自己的一些感悟写出来给大家分享一下. ajax技术可以说是Web2.0应用程序的技术基础,尽管软件经销商和开源社区 ...

  2. Linux查看硬件信息以及驱动设备的命令

    用硬件检测程序kuduz探测新硬件:service kudzu start ( or restart) 查看CPU信息:cat /proc/cpuinfo 查看板卡信息:cat /proc/pci 查 ...

  3. 监听视图树 OnGlobalLayoutListener

    背景 我们都知道在onCreate()里面获取控件的高度是0,这是为什么呢?我们来看一下示例: 首先我们写一个控件 public class MyImageView extends ImageView ...

  4. FastReport 动态修改连接字符串

    代码如下: Report rp = new Report(); rp.Load(@"Print\aa.frx"); rp.Dictionary.Connections[0].Con ...

  5. querydsl的好处

    http://www.querydsl.com/ 封装了很多访问不同数据层平台的方法,提供统一的通用框架(统一的书写格式,以一种通用的API方式来构建查询).便于抽成统一数据层,昨晚底层,以后其他模块 ...

  6. apache的500错误是写到哪个文件里面

    apache的500错误是写到哪个文件里面

  7. DIV布局之道二：DIV块的嵌套，DIV盒子模型

    本文讲解DIV块布局的第二种使用方式:嵌套.“DIV嵌套”在有些文献中也被称为“盒子模型”,说的通俗一点就是嵌套(一个大的DIV块内部又包含一个或多个DIV块). 请看如下代码: CSS部分: CSS ...

  8. 返回到上一页的html代码的几种写法

    关键词:返回上一页 html代码超链接返回上一页代码: <a href=”#” onClick=”javascript :history.back(-1);”>返回上一页</a> ...

  9. json格式初涉

    json用{}表示json对象,[]表示数组,里面以值对的方式来存储信息 var jsondata='{"staff": [{"name":"jim& ...

  10. PHP扩展开发(5) - PHP常量的定义和读取

    1. 定义   //定义PHP常量REGISTER_STRINGL_CONSTANT("SIMPLE_VERSION", PHP_SIMPLE_VERSION, sizeof(PH ...