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. ASP.NET协作应用集成到trsids身份验证服务器的开发流程

    开发Actor协同模块: (参考TRSIDS4.0 协作应用集成手册[asp.net]) ASP.Net协作应用集成到IDS之前,需要开发Actor类实现协作应用回调接口中定义的本地登录.退出.用户信 ...

  2. c-整型家族(integer family)

    C中,整型有: characters, short integer, integer, long integer 看起来,long integer要比short integer大,但是这也是不一定的. ...

  3. Ext江湖笔记:JavaScript基本知识点

    1.基本对象:Number,String,Date,Array,Error,RegExp,Math,Boolean ps:本人基本使用java写代码,常常写出Number n = new Number ...

  4. Mysql 视图笔记2

    这学期开了数据库的课,对sql注入颇感兴趣.因此,对数据库语句也颇为喜爱.遇到了with check option 问题.这属于sql view里面的一个问题.在此略做小结.大牛勿喷! 先自定义一个t ...

  5. sqoop 1.4.4-cdh5.1.2快速入门

    一.快速入门 (一)下载安装 1.下载并解压 wget http://archive.cloudera.com/cdh5/cdh/5/sqoop-1.4.4-cdh5.1.2.tar.gz tar - ...

  6. PLSQL developer连接不上64位Oracle的解决方法

    PLSQL developer连接不上64位Oracle的解决方法 64位下装Oracle 11g 64位,PLSQL Developer使用出现问题. 问题描述: 登录对话框中,数据库下拉框为空: ...

  7. 1.3.1 switch 语句中的 String

    switch语句是一种高效的多路语句,可以省掉很多繁杂的嵌套if判断: 在Java 6及之前,case语句中的常量只能是byte.char.short和int(也可以是对应的封装类)或枚举常量,在Ja ...

  8. 初探react

    知道这个框架有一段时间了,可是项目中没有用到,也懒得整理,最近两天比较清闲,又想起了它.好了,废话不多说了,都是干货. react是个什么框架? 为什么用react? react 的原理 react有 ...

  9. 【学习笔记】【oc】Block

    块(block):类似于定义一个匿名的函数.至于其他什么用处我就不知道了 块的定义: ^[块返回值类型](形参类型1 形参1, 形参类型2 形参2,...) { //块执行体 } 跟函数语法格式的差别 ...

  10. Solr 单机配置

    一. 准备软件 提前安装好Java1.8和Tomcat9 下载Solr6.1,官网位置:http://mirrors.tuna.tsinghua.edu.cn/apache/lucene/solr/6 ...