Ajax 滚动下拉通用分页代码

我将请求的功能封装起来了 放在一个公用的js文件下面

然后使用juicer.js 来做js的模版 这样后期如果可以在任何的地方使用这个ajax的加载分页了

ajaxPage.js文件代码  option是配置一些公用的传入值

var page_module = {

	options : {

		pagesize : 10,

		get_content_callback : false,

		base_url : '/community/',

		uid : 0,

		aid :0, //活动id

		status :0,

	},

	init : function(options){

		this.options = $.extend(this.options, options);

	},

	

	//获取内容列表信息

	get_content_list : function(page){

		$.ajax({

			url : this.options.base_url,

			dataType : 'JSON',

	        beforeSend: function(XMLHttpRequest){

	        	$(".more").show().html('<span><img src="/static/community/images/loading.png" class="loading_img" />加载中...</span>');

	        },

			data:{page:page, pagesize:this.options.pagesize, uid:this.options.uid,dateline:this.options.dateline,ajax:1,aid:this.options.aid},

			success:function(data){

				

				if(data && page_module.options.get_content_callback){

					page_module.options.get_content_callback(data);

				}

			}

		});

	}

};

　　

附上juicer.js的文件下载地址 方便后期下载  http://juicer.name/docs/docs_zh_cn.html

在使用ajax分页的页面 代码展示 只列出来了js部分代码 list.html

<div class="circle_base">

    <ul id="contentlist">

    	{if $shopList}

    	

    	{loop $shopList $key $value}

        <li>

        	<div class="main">

                <a href="javascript:;" class="arrow"><i></i></a>

                <dl>

                    <dt><img src="{$value['avatar']}" width="50px" height="50px"></dt>

                    <dd>

                        <h3>{$value['shopName']}</h3>

                        <p>促销券:{$value['cpname']}</p>

                    </dd>

                </dl>

        	</div>

            <ul class="explain" rel="0">

            	<li>

                    <span>说明：</span>

                    <div>{$value['cpdesc']}</div>

                </li>

                <li>

                    <span>数量：</span>

                    <div>{$value['max']}</div>

                </li>

                <li>

                    <span>适用门店：</span>

                    <div>{$value['shopListName']}</div>

                </li>

                <li>

                    <span>截至日期：</span>

                    <div>{$value['etime']}</div>

                </li>

            </ul>

        </li>

        {/loop}

        {else}

        <li class="no_pc">暂时还没有商家参与</li>

        {/if}

    </ul>

    <div class="more" style="display:none">

      	<a href="javascript:;">没有更多了</a> 

	</div>

</div>

<script src="/static/community/js/ajaxPage.js"></script>

<script src="/static/community/js/juicer.js"></script>





<script id="tpl" type="text/template">

	{@each dataAjax as it, k}

    <li>

		<div class="main">

			<a href="javascript:;" class="arrow"><i></i></a>

			<dl>

				<dt><img src="{$value['avatar']}" width="50px" height="50px"></dt>

				<dd>

				<h3>${it.shopName}</h3>

				<p>促销券:${it.cpname}</p>

				</dd>

			</dl>

		</div>

		<ul class="explain" rel="0">

			<li>

				<span>说明：</span>

				<div>${it.cpdesc}</div>

			</li>

			<li>

				<span>数量：</span>

				<div>${it.max}</div>

			</li>

			<li>

				<span>适用门店：</span>

				<div>${it.shopListName}</div>

			</li>

			<li>

				<span>截至日期：</span>

				<div>${it.etime}</div>

			</li>

		</ul>

    </li>

	{@/each}

</script>



<script>

$(".circle_base li .main").live("click",function(){

	$(this).toggleClass("arrow_90");

	$(this).siblings(".explain,.share_list").slideToggle();

});

//初始化分页数据

var options = {

	pagesize     : 10, 

	base_url     : '/community/active/shopList',

	aid : {$aid},

	get_content_callback : function(result){

		if(result && result.dataAjax ){

			

			var tpl = document.getElementById('tpl').innerHTML;

			var html = juicer(tpl, result);

			$("#contentlist").append(juicer(tpl,result));

			

		}else{

			$(".more").show().html('<a href="javascript:;" title="没有更多了">没有更多了</a>');



		}

	}

};

$(document).ready(function(){

	page_module.init(options);

	var range = 50;             //距下边界长度/单位px

	var num = 2;

	var totalheight = 0; 

	 $(window).scroll(function(){

         var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

         totalheight = parseFloat($(window).height()) + parseFloat(srollPos);

 		if(($(document).height()-range) <= totalheight) {

 			page_module.get_content_list(num);

 			num++;

         }

     });

});



</script>

　　

坐下备份方便后期分页直接使用