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. 《C专家变成》之二

    第五章 一.对链接的思考 目标文件并不能直接执行,它首先需要载入到链接器.链接器确认main函数为初始进入点(程序开始执行的地方),把符号引用绑定到内存地址,把所有的目标文件集中在一起,再加上库文件, ...

  2. ifconfig命令详解

    linux下网上命名规律:eth0,eth1.第一块以太网卡,第二块.lo为环回接口,它的IP地址固定为127.0.0.1,掩码8位.它代表你的机器本身. 1.ifconfig是查看网卡的信息 eth ...

  3. Visual Studio写的项目在 IIS 服务器上运行的两种简单方法

    首先需要PC上开启了IIS服务,相关方法网上很多,也很简单 第一种:直接在项目中操作 1.创建一个项目,然后右击选中项目,右击,单击属性,打开项目属性标签页面 如图,选择Web标签,在服务器栏目中选中 ...

  4. LINQ简明教程：数据排序、分组、过滤

    LINQ可以对很多数据源进行查询操作,比如数据库.数组(array).链表(list).XML文件等.在本文中,我将从数组中提取数据,这些数据是10个最受欢迎的国家.有一个类叫Countries,有c ...

  5. HTTPS 部署简要指南

    许多Web开发者都知道SSL,但常见的情况是SSL没有完整地部署或者没有部署在它应该部署的地方.这篇关于何时及如何部署SSL的简要指南,将帮助你避免大多数常见错误. 要点 如果你有任何机密信息,或者你 ...

  6. share js 分享代码

    (function(){ var $doc = $(document); var shareHandlers = { 'twitter': function(prop,shareUrl){ var D ...

  7. 微信js-sdk，选择图片，上传，下载到本地，php服务端

    //前端js代码<script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId} ...

  8. （原）C++中指针不初始化就传递的问题

    C++中指针的使用.以前在使用指针之前都会初始化.今天没有初始化,然后指针传递后没有内容(testptrnoret),后来发现返回指针的话(testptrret),就可以了. // testptr.c ...

  9. if exists用法

    1 判断数据库是否存在Sql代码 if exists (select * from sys.databases where name = ’数据库名’)    drop database [数据库名] ...

  10. Python自动化运维之8、正则表达式re模块

    re模块 正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串,在文本处理方面功能非常强大,也经常用作爬虫,来爬取特定内容,Python本身不支持正则,但是通过导入re模块,Python ...