jq 加载静态json 点击加载更多
json数据未分页
html代码
<div class="card">
<div class="card-header d-flex align-items-center justify-content-between">
<span class="font-weight-bold"><i class="fa fa-folder mr-2"></i>日志归档</span>
<span><a href="/blog?name=" data-toggle="tooltip" data-placement="top" title="" data-original-title="作者所有博文"><i class="fa fa-ellipsis-h"></i></a></span>
</div>
<div class="card-body py-2">
<ul class="m-0" id="blog-archives"></ul>
</div>
<div class="js-load-more"></div>
</div>
jq代码
<script>
jQuery(function(){
/*初始化*/
var counter = 0; /*计数器*/
var pageStart = 0; /*offset*/
var pageSize = 5; /*size*/
/*首次加载*/
getData(pageStart, pageSize);
/*监听加载更多*/
jQuery(document).on('click', '.js-load-more', function(){
counter ++;
pageStart = counter * pageSize;
getData(pageStart, pageSize);
});
function getData(offset,size){
jQuery.ajax({
type: 'GET',
url: '/public/miscfile/blog/json/blog-{$space[uid]}-archives.json'+ '?' + offset + '/' + size, //这里offset,size无作用,仅方便调试
dataType: 'json',
beforeSend:function(XMLHttpRequest){
jQuery('#blog-archives').append('<div class="loading-archives text-center py-5"><i class="fa fa-spinner fa-spin fa-2x"></i></div>');
},
success: function(reponse){
jQuery('#blog-archives .loading-archives').remove();
var data = reponse;
var sum = reponse.length;
var result = '';
if(sum - offset < size ){
size = sum - offset;
}
if(sum > pageSize){
jQuery(".js-load-more").addClass('card-footer text-center').html('<a href="javascript:;">加载更多</a>');
}
for(var i=offset; i< (offset+size); i++){
result +='<li class="py-2"><a href="home.php?mod=space&uid='+data[i].uid+'&do=blog&view=me&date='+ data[i].month +'" class="d-flex align-items-center justify-content-between"><span>'+ data[i].month +'</span><span>'+ data[i].monthcount +' 篇</span></a></li>';
}
jQuery('#blog-archives').append(result);
if ( (offset + size) >= sum){
jQuery(".js-load-more").hide();
}else{
jQuery(".js-load-more").show();
}
},
error: function(xhr, type){
jQuery("#blog-archives").html('<div class="text-center text-muted py-2">暂无记录</div>');
}
});
}
});
</script>