jquery 加载静态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>