前台：分页JQ无刷新加载分页内容

chen'mo

2013-02-08 / 0 评论 / 4,377 阅读 / 正在检测是否收录...

02/08

温馨提示：

本文最后更新于1970年01月01日，已超过20042天没有更新，若内容或图片失效，请留言反馈。

这个可以无限下拉显示内容了，不用分页了。

不完整列表页代码

<haed>
……省略
<script src="<{$home}>/js/jquery.min.js"></script>
……省略
</head>
<body>
……省略
<div id="page">
<div class="list_article">
……列表内容省略
<div>
<div class="pages">
<{if $total gte $v_pagesize}>
<div class="pages"><{getpaging nohtml=1 page=$page template="<a href='[page]'>[page]</a> " currenttemplate="<span class='current'>[page]</span> "   previoustemplate="<a href='[page]'>上一页</a> " noprevioustemplate="" nexttemplate="<a href='[page]' class='next'>下一页</a> " nonexttemplate="" paging="[previous][paging][next]" }> </div>
<{/if}>
</div>
</div>
</div>
<script type="text/javascript" src="<{$home}>/js/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
        $("#page").infinitescroll(
        {
          loading: {
            finishedMsg: "<em>后面没有啦Orz</em>",
            img: "<{$home}>/img/ajax-loader.gif",
            msg: null,
            msgText: "<em>正在努力加载中...</em>",
            speed: 'fast'
        },  //加载的时候显示的信息和图片
                state: {currPage: 1},
        pathParse: false,
        debug           : false, //关闭启用调试信息
                 behavior                : "",
        preload         : true,
        nextSelector    : "div.pages a.next", //包含下一页链接的选择器
        navSelector     : "div.pages", //导航的选择器，会被隐藏
        dataType                 : 'html',
        appendCallback        : true,
        extraScrollPx   : 200, //滚动条距离底部多少像素的时候开始加载，默认150
        itemSelector    : "div.list_article", //你将要取回的选项(内容块)
        animate         : true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
        bufferPx        : 40, //载入信息的显示时间，时间越大，载入信息显示时间越短
        errorCallback   : function(){} //当出错的时候，比如404页面的时候执行的函数
        },
        function(newElements){
    
            //定义加载完后之前数据变化
            // $(newElements).css('background-color','#ffef00');
            // $(this).prepend(newElements);
            //
            //END OF PREPENDING
            
            window.console && console.log('context: ',this);
            window.console && console.log('returned: ', newElements);
            
    });

});
</script>
……省略
</body>

DEMO：http://www.iaeweb.com/apps/

需要用到的文件

1.http://www.iaeweb.com/js/jquery.min.js

2.http://www.iaeweb.com/js/jquery.infinitescroll.min.js