댓글 페이징 달기.

그누보드의 경우

댓글이 무한정으로 달릴경우

레이아웃이 하단으로 무한정 길어집니다.

레이아웃이나, 길어지는게 보기 좋지 않은분들을 위한 댓글 페이징 기능입니다.

코드하단에 아래 스크립트 추가.

[code]

$(function(){
    paging();
    paging_nation();
});
var view_comment = 5; // 페이지당 보여지는 댓글의 개수
function paging_nation()
{
    $('.pagenation').on('click', function(e){
        var Idx = $(this).index()+1;
        var count = $('.a_comment').length;
        var $a_comment = $('.a_comment');
        var la_page = Idx * view_comment;
        var fr_page = Idx * view_comment - view_comment;
        $a_comment.slice(0).hide();
        $a_comment.slice(fr_page, la_page).show();
        console.log(fr_page, la_page);
        $('.pagenation').removeClass('active');
        $(this).addClass('active');
    }); 
}
function paging()
{
    var count = $('.a_comment').length;
    var $a_comment = $('.a_comment');
    $a_comment.slice(view_comment).hide();
    var paging = '';
    if(count>view_comment){
        var totalpage = Math.floor(count/view_comment)+1;
        for(var i=1;i<=totalpage;i++){
            if(i==1)var active = "active";else var active='';
            //paging += '<a href="javascript:;" class="pagenation" onclick="call_paging('+i+')">'+i+'</a>';
            paging += '<a href="javascript:;" class="pagenation '+active+'">'+i+'</a>';
        }
        $('.paging').html(paging);
    }
    paging_nation();
}

[/code]

[code]

<article id="c_<?php echo $comment_id ?>" <?php if ($cmt_depth) { ?>style="margin-left:<?php echo $cmt_depth ?>px;border-top-color:#e0e0e0"<?php } ?>>

[/code]

부분을 찾아  

[code]

<article class="a_comment" id="c_<?php echo $comment_id ?>" <?php if ($cmt_depth) { ?>style="margin-left:<?php echo $cmt_depth ?>px;border-top-color:#e0e0e0"<?php } ?>>

[/code]

아래와 같이 클래스명을 추가함.

[code]

    </article>
    <?php } ?>
    <?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>
</section>

[/code]

부분을 찾아

[code]

    </article>
    <?php } ?>
    <?php if ($i == 0) { //댓글이 없다면 ?><p id="bo_vc_empty">등록된 댓글이 없습니다.</p><?php } ?>
    <div style="text-align: center">
    <div class="paging"></div>
    </div>
</section>

[/code]

아래와 같이 변경.

style.css

[code]

/*페이징 */
.paging {
  display: inline-block;text-align: center
}
.paging a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.paging a.active {
  background-color: #253dbe;
  color: white;
  border: 1px solid #4CAF50;
}

.paging a:hover:not(.active) {background-color: #253dbe;}

[/code]

아래와 같이 추가.

자세한건 스샷과 링크의 페이지에서 확인해주세요.

포함된 파일은 그누보드 베이직 기준입니다.