简单的 Wordpress AJAX 分页

Posted 2023-03-10

【中文标题】简单的 Wordpress AJAX 分页

【英文标题】：Simple Wordpress AJAX pagination

【发布时间】：2013-04-05 16:22:32

【问题描述】：

我正在使用下面的循环 + jQuery 加载下一组页面，它在第一次点击时起作用，但是当加载下一页并点击“较新的帖子”时，它会重新加载整个页面.有什么想法吗？

<div id="content">
    <?php
$new_query = new WP_Query();
$new_query->query('post_type=post&showposts=1'.'&paged='.$paged);
?>

<?php while ($new_query->have_posts()) : $new_query->the_post(); ?>
<?php the_title(); ?>

<?php endwhile; ?>
    <div id="pagination">
    <?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?>
    <?php previous_posts_link('Newer Entries &raquo;') ?>
    </div>
</div><!-- #content -->

<script>
$('#pagination a').on('click', function(event)
event.preventDefault();
var link = $(this).attr('href'); //Get the href attribute
$('#content').fadeOut(500, function() );//fade out the content area
$('#content').load(link + ' #content', function()  );
$('#content').fadeIn(500, function() );//fade in the content area

);
</script>

【问题讨论】：

这不会为我创建分页链接，有什么想法吗？另外，你的 $pages 值是多少，你从哪里得到它 - 从代码中看不到它

【参考方案1】：

您正在使用 jQuery 的 load() 方法插入内容，这是 $.ajax 的快捷方式，它当然是动态插入内容。

动态内容需要将事件委托给非动态父级，jQuery 使用on() 使事情变得容易

jQuery(function($) 
    $('#content').on('click', '#pagination a', function(e)
        e.preventDefault();
        var link = $(this).attr('href');
        $('#content').fadeOut(500, function()
            $(this).load(link + ' #content', function() 
                $(this).fadeIn(500);
            );
        );
    );
);

【讨论】：

这确实很好用，但是当#content div 淡入时，旧内容仍然存在片刻，然后新内容就会出现。知道为什么会发生这种情况吗？跨度>

没关系，发现我只需要稍微延迟一下就可以了。再次感谢。

我发现这很完美，但你是如何设置延迟的？

@AleksandarĐorđević - 我已经编辑了上面的答案以使用 load() 中内置的回调，这应该可以解决任何内容仍然可见等问题。

我使用了这个并且它有效，但我注意到当我点击分页中的另一个页面时，这些新帖子会被包含在具有相同 ID 的新 div 中。所以本质上，最终会出现两个相同的 div，旧的 div 养育新的 div。有什么办法可以解决这个问题还是我错过了什么？

【参考方案2】：

我使用了 adeneo 的解决方案，并进行了一些小调整。

我的分页在我想要加载的容器之外，因此我对分页内容执行了单独调用。根据 cmets，我更新了代码以进行单个 Ajax 调用，过滤返回的数据以检索和更新所需的元素。 我的分页包含所有链接，即使是当前页面。如果单击的元素是活动页面，则执行 Ajax 请求毫无意义，因此我添加了逻辑以仅针对其父列表项元素没有 .disabled 类的分页链接。 每次我加载新内容时页面都会跳转，因为它使用了淡出/入（在不透明动画完成后设置display: none;）。相反，我手动为不透明度设置动画，这限制了高度波动的量。

这是更新后的代码：

$('#content').on('click', '#pagination :not(.disabled) a', function(e)
    e.preventDefault();
    var link = $(this).attr('href');
    $.post( link, function( data ) 
        var content = $(data).filter('#content');
        var pagination = $(data).filter('#pagination');
        $('#pagination').html(pagination.html());
        $('#content').animate(
            opacity: 0,
            500, 
            function()
                $(this).html(content.html()).animate(
                    opacity: 1,
                    500
                );
            
        );
    );
);

【讨论】：

我需要在旧帖子下添加帖子。这可能吗？

@JaganK 我已更新代码以发出单个 ajax 请求。谢谢！

@FaisalAbuJabal 您的问题已经很不一样了，因此需要单独提出一个问题。在这种情况下，我不会使用编号分页，而是使用“加载更多帖子”的方法。然后使用.append() 而不是.html() - $('#content').append(content.html());。如果您需要更完整的解决方案，请提出一个新问题。