首页 文章

Wordpress ajax分页评论

提问于
浏览 496
1

我在数据库中调用我的Wordpress注释并使用自定义查询显示它们,然后使用Wordpress的 paginate_links() 函数对我的注释进行分页 . 我的代码:

<div class="commentsWrap">
<div id="comments" class="commentBoxesWrap">
    <?php
    global $wpdb;
     $querystr = " SELECT comment_content, commentmeta1.meta_value 
     AS comment_name, commentmeta2.meta_value 
     AS comment_country 
     FROM $wpdb->comments, $wpdb->commentmeta 
     AS commentmeta1, $wpdb->commentmeta 
     AS commentmeta2 
     WHERE $wpdb->comments.comment_ID = commentmeta1.comment_id 
     AND $wpdb->comments.comment_ID = commentmeta2.comment_id 
     AND commentmeta1.meta_key = 'comment_name' 
     AND commentmeta2.meta_key = 'comment_country' 
     AND $wpdb->comments.comment_approved = 1 ";

     $total_query = "SELECT COUNT(1) FROM (${querystr}) AS combined_table";
     $total = $wpdb->get_var( $total_query );
     $items_per_page = 4;
     $page = isset( $_GET['paged'] ) ? abs( (int) $_GET['paged'] ) : 1;
     $offset = ( $page * $items_per_page ) - $items_per_page;
     $comment_info =  $wpdb->get_results($querystr .  "ORDER BY $wpdb->comments.comment_date DESC LIMIT ${offset}, $items_per_page");

    echo '<ul class="commentsList">';
    // display the results
    foreach($comment_info as $info) { 
          echo '<li class="commentBox"><p>"' . $info->comment_content . '"</p><h6>' . $info->comment_name . ', ' . $info->comment_country . '</h6></li>'; 
    }
     echo '</ul>';
    ?>

     </div>  <!-- //commentBoxesWrap -->
     <?php
     echo '<div class="commentPagination">';
     echo paginate_links( array(
        'base' => add_query_arg( 'paged', '%#%' ),
        'format' => '',
        'prev_text' => __('&laquo;'),
        'next_text' => __('&raquo;'),
        'total' => ceil($total / $items_per_page),
        'current' => $page
    ));
    echo '</div>';
    ?>
    </div>  <!-- //commentsWrap -->

这工作正常并输出编号分页,但是,当我单击分页时,我需要ajax注释 . 通过一些研究,我设法提出了这个js代码:

$('.commentsWrap').on('click', '.commentPagination a', function(event) {
     event.preventDefault();
     var link = $(this).attr('href');
     $('.commentsWrap').load(link + '.commentsWrap');
});

这样做虽然是通过ajax而不是评论部分加载整个页面!有人可以帮我吗?

谢谢 .

2 回答

  • 0

    试试这个评论的分页 . 我已经使用了jquery . 您需要更改ajax页面网址和加载程序图像源的网址 . 尝试在下面添加以下代码 . 此代码仅在您的分页正确且有效时才有效 .

    <div class="loadmorediv">
    
            <button id="loadmorebutton" style="padding:15px 25px;">More</button>
    
            <button id="no_morebutton" style="padding:15px 25px;">No more</button>
    
            </div> <!-- //commentsWrap -->
    
    
            <div class="row" style="text-align:center; ">
    
            <a id="inifiniteLoader"><img src="imagesoruce" /></a>
    
                <div style="clear:both"></div>
    
            </div> 
    
     <script type="text/javascript">
    
            var count = 2;
    
            var total = <?php ceil($total / $items_per_page)  ?>;
    
    
            jQuery(function($) {
    
                $('#loadmorebutton').click(function() {
    
    
                         if (count > total){
    
                     $('#loadmorebutton').hide();
    
                        $('#no_morebutton').show();
    
                    return false;
    
                    }else{
    
                            $('#loadmorebutton').hide();
    
                         $('a#inifiniteLoader').show();
    
                        loadArticle(count);
    
                     }
    
                     count++;
    
    
    
                })
    
            });
    
            function loadArticle(pageNumber){    
    
                   jQuery.ajax({
    
                         url: "Yourpageurl"+pageNumber+"/",
    
                        type:'POST',                      
    
                        success: function(html){
                       result=    jQuery(html);
    
                            jQuery('a#inifiniteLoader').hide('1000');
    
                            jQuery('#loadmorebutton').show('1000');
    
                         jQuery("ul.commentsList").append(result.find("ul.commentsList").html());   // This will be the div where our content will 
                        }
                    });
    
                return false;
                      }
    
        </script>
    
  • 0

    你在选择器之前缺少一个空格 . 这必须是:

    $('.commentsWrap').load(link + ' .commentsWrap');
    

相关问题