当前所在位置: 首页>>百科全书

WordPress分页加载更多ajax

发布时间:2025-10-19 15:34:56 本站作者 【 字体: 】 浏览:63 次

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

html结构

<div id="pagination" class="noajx"><?php next_posts_link('&#9660;  加载更多...'); ?></div>
<div id="loadmore"><a href="JavaScript:;">&#9660;  正在加载 ...</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}


上一篇:WordPress小工具的高级用法

下一篇:精巧的JavaScript图像延迟加载库Echo.js

最新发布
国内vx小号购买,出售实名微信账号平台-实名认证微信小号

国内vx小号购买,出售实名微信账号平台-实名认证微信小号

国内vx小号购买,出售实名微信账号平台-实名认证微信小号
近年来,随着社交平台的快速发展,微信作为国内用户量最大的社交软件之一,其账号资源也逐渐成为一种“稀缺品”。购买推荐平台faka128.com [点击购买 24小自动发货]网址复制到浏览器打开访问购买-优惠 十年老店,品牌保障faka128.com尤其是在一些需要多账号运营的行业,如电商、营销推广、自媒体等,VX小号(即...
PPT自动播放怎么设置取消?PPT自动播放在哪里关闭

PPT自动播放怎么设置取消?PPT自动播放在哪里关闭

PPT自动播放怎么设置取消?PPT自动播放在哪里关闭
ppt自动播放怎么设置取消?很多从网上直接下载PPT模板的用户发现,下好的PPT模板都是自动播放的设置,那么对于自己不需要自动播放的话要怎么设置取消呢?一起来看看具体的取消方法吧。ppt自动播放怎么设置取消?1、PPT幻灯片建立完成后双击幻灯片图标进入到幻灯片界面中。2、单击PPT首页的空白位置进行幻灯...
PPT图片背景怎么设置为透明?PPT图片背景设置为透明的方法

PPT图片背景怎么设置为透明?PPT图片背景设置为透明的方法

PPT图片背景怎么设置为透明?PPT图片背景设置为透明的方法
在PPT中,将图片背景设置为透明可以为你的幻灯片增加一些特殊效果,使其与文本和其他图形元素更好地融合。透明背景的图片可以让你展示出更清晰、更专业的视觉效果。如果你想知道如何在PPT中将图片背景设置为透明,下面是一些简单的步骤供你参考。PPT图片背景设置为透明的方法第一步、插入图片步骤:挑选一张最佳...
WPS和PPT有什么区别?WPS和PPT的区别介绍

WPS和PPT有什么区别?WPS和PPT的区别介绍

WPS和PPT有什么区别?WPS和PPT的区别介绍
WPS和PPT是两种常见的办公软件,它们在功能和使用方面有一些区别,因此也适用于不同的用户需求和工作场景。无论是在学校、企业还是个人办公中,理解WPS和PPT之间的区别对于选择合适的工具至关重要,下面看看小编的文章你就会明白了。WPS和PPT的区别介绍一、软件功能相信这是大家关注最多的一个问题。pp...