我将请求的功能封装起来了 放在一个公用的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>
坐下备份方便后期分页直接使用