首页 > 代码库 > scroll pagination.js数据重复加载、分页问题
scroll pagination.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>
scroll pagination.js数据重复加载、分页问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。