WRZ博客

Emlog简单实现文章列表ajax不刷新分页

   想给首页列表加一个不刷新下拉分页,之前的办法都是用jquery.ias.js 这个分页插件,但是加载这个插件 再加上你的配置 ,js文件就显得很大了 为了实现这么一个小功能加这么多js 真的是没那个必要。于是百度搜了一下找到了一个wordpress程序的ajax分页教程 把它移植到emlog  简单几行代码就可能实现 教程开始吧!

首先改造我们首页文件log_list.php 找到分页输出:

<div id="pagenavi">
	<?php echo $page_url;?>
</div>

修改为:

<div id="pagenavi">     
	<?php if ($total_pages > $page):?>  //如果总页大于当前页面
	<a href="<?php echo $pageurl . ($page + 1);?>"></a>// 就输出下一页地址
	 <?php endif;?>
</div>

在模板主要main.js里面加上 以下js  分为两种 你可以根据自己需求选择其中一种方法:

1.实现点击按钮不刷新实现下拉分页方法:

$("#pagenavi a").on("click", function(){  //点击分页按钮 
$.ajax({
type: "POST",
url: $(this).attr("href") ,
success: function(data){
result = $(data).find("#content .post");// 你文章样式class 这个根据自己列表样式修改的,不理解留言问我
nextHref = $(data).find("#pagenavi a").attr("href");
// 渐显新内容
$("#content").append(result.fadeIn(300));//你的文章列表样式class,不理解留言
if ( nextHref != undefined ) {
$("#pagenavi a").attr("href", nextHref);
} else {
$("#pagenavi").remove();// 若没有链接,即为最后一页,则移除分页输出
}
}
});
return false;
});

2.直接下拉滚动页面实现下拉分页方法:

$(window).on("scroll",function(){ // 给浏览器窗口绑定 scroll 事件
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // 判断窗口的滚动条是否接近页面底部
$.ajax({
type: "POST",
url: $(this).attr("href") ,
success: function(data){
result = $(data).find("#content .post"); //文章样式class 根据自己样式修改  
nextHref = $(data).find("#pagenavi a").attr("href");
// 渐显新内容
$("#content").append(result.fadeIn(300)); //文章列表样式class  根据自己情况修改
if ( nextHref != undefined ) {
$("#pagenavi a").attr("href", nextHref);
} else {
$("#pagenavi").remove(); // 若没有链接,即为最后一页,则移除分页输出
}
}
});
}
});

我是用的第1种方法 点击按钮分页 ,有问题请留言

 

已有10条评论
  • 清风明月

    ##此评论仅管理可见##

    回复
  • 纯白的背景感觉有点刺眼..但拉到最下面又是另一种感觉。

    回复

    WRZ

    @MR.CHOU:可能会有一点,刚刚看你的博客 给我很大启发 我也抽时间 弄背景颜色随着早晚时间调自动整亮色

    回复
  • 看看啦

    回复
  • 感谢分享

    回复

    WRZ

    @左南:别客气!

    回复
  • 不是WP的,差评!!!

    回复

    WRZ

    @Lvtu:老哥,这么真实的吗 哈哈!

    回复
  • 清风明月

    拿走了,谢谢

    回复
  • 看起来不错呦

    回复

私密评论: