WordPress的ajax分頁評論

Question

我從數據庫中調用我的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 -->

這可以正常工作並輸出帶編號的分頁，但是，當我單擊分頁時，我需要取消注釋。 經過一些研究，我設法提出了以下js代碼：

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

但是這樣做是通過ajax而不是注釋部分加載整個頁面！ 有人可以幫我嗎？

謝謝。

Answer 1

嘗試使用此按鈕進行分頁。 我已經為此使用了jQuery。 您將需要更改ajax頁面url和加載程序圖像源的url。 嘗試在代碼下面添加此代碼。 僅當分頁正確且有效時，此代碼才有效。

<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>

Answer 2

您在選擇器前缺少空格。 必須是：

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