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. Linux随笔

    列表:ls -l(显示详细属性)long -a(显示全部文件包括隐藏文件)all -h(字节转换) -d(显示当前目录本身不显示目录下) -i(显示I节点) df -h 人性化查看磁盘占用率 serv ...

  2. HTML基本概念

    什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...

  3. 关于VS2013连接远程数据库服务器的蛋疼问题

    填写完用户名和密码后,点击数据库下拉菜单,接着就报错误

  4. js中如何把字符串转化为对象

    例如   [javascript]  var test='{ colkey: "col", colsinfo: "NameList" }'       var ...

  5. 营配数据质量核查，关于营销mis系统与配电gis系统里面的sql语句查询，做为积累使用，下次就不用重复写同样的语句了。

    1.配电gis线路导出数据: select r.name 线路名称,r.run_status 运行状态,r.voltage_level 电压等级,r.manager_depart 管理部门,r.bel ...

  6. Lua 基础知识-面向对象

    通过函数闭包的方式来实现面向对象 -- 通过函数闭包的方式来实现面向对象 function People(name) local self = {} local function init() sel ...

  7. mvvm框架正式名字确定

    经过长时间的选名,今天终于把名字定下来了,ddrjs  data drive render,其实框架的核心还是 数据驱动渲染,其实现在市面上的大部分mvvm框架如:angular.vue.avalon ...

  8. C++拾遗（十三）友元和嵌套类

    友元类 使用友元的场合: 1.两个类既不是is-a关系也不是has-a关系,但是两个类之间又需要有联系,且一个类能访问另一个类的私有成员和保护成员. 2.一个类需要用到另外多个类的私有成员. C++p ...

  9. 【转】Debug和Release区别

    VC下Debug和Release区别 最近写代码过程中,发现 Debug 下运行正常,Release 下就会出现问题,百思不得其解,而Release 下又无法进行调试,于是只能采用printf方式逐步 ...

  10. 解决easyui datagrid加载数据时，checkbox列没有根据checkbox的值来确定是否选中

    背景:   昨天帮朋友做一个easyui datagrid的小实例时,才发现easyui datagrid的checkbox列,没有根据值为true或false来选中checkbox,当时感觉太让人失 ...