html分页请求代码,WordPress分页加载更多ajax

不适用分页，转而采用在文章列表下方插入下一页列表的方式进行加载，这是ajax分页的另一种形式。下面是实现方法

html结构

▼  正在加载 ...

js代码

这已经是冒泡绑定，所以全站ajax时不需要放入回调重载内

$(document).on('click','#pagination a:not(.noajx)',function(){

var _this = $(this);

var next = _this.attr("href").replace('?ajx=container','');

var docH = $(document).height();

var pagination = '#pagination'; // 下一页按钮标签id

var pagenav = '#main .page-navigator';

$(pagination).hide();

$("#loadmore").show();

$.ajax({

url: next,

beforeSend: function(){

//

},

success: function (data) {

$('#main .blog-content').append($(data).find('#main .post-box'));    //追加内容

$(pagination).html( $(data).find(pagination).html() );    //更新分页导航

$(pagenav).html( $(data).find(pagenav).html() );    //更新分页导航

// 后退前进处理

//var state = {url: next,title: $(data).find("title").text(),html: $(data).find('#ajx_content').html()};

//window.history.pushState(state,"", next);

//$('html, body').animate({scrollTop: docH-280}, 500);    //上滚

nextHref = $(data).find("#pagination a").attr("href");

if ( nextHref != undefined ) {

$(pagination).show();

$("#loadmore").hide();

$("#pagination a").attr("href", nextHref);

} else {

$(pagination).show();

$("#loadmore").hide();

$(pagination).html('这是最后一页了！');    //最后一页

}

},

complete: function(){ // 回调

//

},

error: function() { // 错误时的处理

location.href = next; //页面错误时跳转到请求的页面

}

});

return false;

});

参考css

#pagination {clear:both;margin: 0 auto;padding:20px;width:180px}

#pagination a{background:#eee;display: block;line-height: 35px;height:38px;text-align: center;font-size: 14px;color: #666}

#pagination a:hover{background:#58749c;color:#fff}

#loadmore{clear:both;margin: 0 auto;padding:20px;width:180px;display:none}

#loadmore a{background:#58749c;display: block;line-height: 35px;height:38px;text-align: center;font-size: 14px;color: #fff}