不适用分页，转而采用在文章列表下方插入下一页列表的方式进行加载，这是ajax分页的另一种形式。下面是实现方法
html结构
<div id="pagination" class="noajx"><?php next_posts_link('▼ 加载更多...'); ?></div>
<div id="loadmore"><a href="JavaScript:;">▼ 正在加载 ...</a></div>
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('<a href="javascript:;" class="noajx">这是最后一页了！</a>'); //最后一页
}
},
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}