我在数据库中调用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' => __('«'),
'next_text' => __('»'),
'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加载整个页面而不是注释部分!请有人帮帮我吗?
感谢。
答案 0 :(得分: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>
答案 1 :(得分:0)
您在选择器前缺少一个空格。这必须是:
$('.commentsWrap').load(link + ' .commentsWrap');