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

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

时间:2019-9-14    作者:bokewo    分类: EMLOG


   想给首页列表加一个不刷新下拉分页,之前的办法都是用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(); // 若没有链接,即为最后一页,则移除分页输出}}});}});


正文完

推荐阅读:

本文最后更新于2019-9-14,已超过4年没有更新,如果文章内容或图片资源失效,请留言反馈,站长会及时处理,谢谢!

分享到:


请遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国有关法律法规

EMLOG Emlog简单实现文章列表ajax不刷新分页
   想给首页列表加一个不刷新下拉分页,之前的办法都是用jquery.ias.js 这个分页插件,但是加载这个插件 再加上你的配置...
扫描二维码阅读原文
前尘影事 www.bokewo.com
生成社交图 ×