【问题标题】:wordpress ajax pagination breaks after 10 pageswordpress ajax 分页在 10 页后中断
【发布时间】:2014-11-04 22:44:47
【问题描述】:

有人可以帮我处理 ajax 分页吗,我已经用了 2 天了,还搞不清楚。我有加载更多样式的分页,这是代码,preety classic(在下面)。 除非占位符到达第 10 页,否则一切都按计划进行。然后,地狱爆发,不再加载任何内容。该按钮仍然有效,直到达到 maxpages 并且按钮被删除,但是超过 10 个占位符没有任何反应。我目前正在使用此脚本的网站以及您可以自己测试的地方是:http://filmhdonline.com/category/toate-filmele/ 我会很感激有人知道我在说什么。提前致谢。

jQuery(document).ready(function() {

    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage);

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink; pageNum++;

    //Load more videos translation
    var more = pbd_alp.more;

    //Loading videos translation
    var loading = pbd_alp.loading;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */

    if(pageNum <= max) {

       // Remove the traditional navigation.
        jQuery('.pagination').remove();

        // Insert the "More Posts" link.
        if( jQuery('#content').find('ul.listing-videos').length == 1 ){
            jQuery('#content ul.listing-videos').append('<li class="more-posts pbd-alp-placeholder-' + pageNum + '"></li>');
            jQuery('#content').append('<p id="pbd-alp-load-posts" class="pagination"><a href="#">' + more + '</a></p>');
        }

    }


    /**
     * Load new posts when the link is clicked.
     */
    jQuery('#pbd-alp-load-posts a').click(function() {

        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            jQuery(this).text(loading);

            jQuery('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' #content ul.listing-videos li',
                function() {
                    //jQuery('.pbd-alp-placeholder-'+ pageNum).children('li').unwrap();                   
                    console.log(pageNum);

                    jQuery(this).children().hide();


                    $newContent = jQuery(this).children().unwrap();


                    $newContent.fadeIn('fast');

                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    **// Add a new placeholder, for when user clicks again.
                    jQuery('#content ul.listing-videos').append('<li class="more-posts pbd-alp-placeholder-'+ pageNum +'"></li>');**

                    // Update the button message.
                    if(pageNum <= max) {
                        jQuery('#pbd-alp-load-posts a').text('Vezi mai multe');
                    } else {
                        jQuery('#pbd-alp-load-posts a').remove();
                    }
                }
            );
        } else {
            jQuery('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});

【问题讨论】:

    标签: ajax wordpress pagination


    【解决方案1】:

    wordpress中的ajax分页,可以使用https://wordpress.org/plugins/wp-pagenavi/之类的插件。

    <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>
    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);
                });
            });
        });
    });
    </script>
    

    【讨论】:

    • 这是主题的一部分,无论如何我都会尽可能地与插件保持距离。
    • @VartolomeiEduardClaudiu 根据您的上述评论更改代码
    • 抱歉,不想粗鲁,要完全更改代码,我可以随时这样做,但是我必须重新制作主题的所有 css,这很痛苦。我目前拥有的是 99% 的工作,问题是当你到达 plaheholder 10、11、12 时,它不再显示任何内容。我留下了一个网址,这样你就可以测试我在说什么。我真的不想重写代码。虽然不是我想要的,但谢谢你的回答。
    【解决方案2】:

    我也有同样的问题。 如果仍然发生,请替换:

    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);
    

    nextLink = nextLink.replace(/\/page\/[0-9]*/, '/page/'+ pageNum);
    

    错误的正则表达式 [0-9] 有问题?只匹配从 1 到 9 的单个数字。从 10 只需要 1。而是 [0-9]* 匹配从 0 到无穷大。所以,它在 9 之后中断(从 0 到 9),因为接下来的 10 并且它只占用了 1。

    【讨论】:

    • 是答案吗?很难说。
    猜你喜欢
    • 2023-02-13
    • 2011-05-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-04-05
    • 2023-03-17
    • 2013-09-23
    相关资源
    最近更新 更多