댓글 페이징 달기. > 그누보드5 팁자료실

그누보드5 팁자료실

댓글 페이징 달기. 정보

댓글 페이징 달기.

첨부파일

view_comment.skin.php (13.8K) 142회 다운로드 2018-12-28 15:02:27
댓글페이징.PNG (20.1K) 26회 다운로드 2018-12-28 15:43:26

본문

그누보드의 경우

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

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

 

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

 

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


$(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();
}

 


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

 

부분을 찾아  

 


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

 

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

 


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

 

부분을 찾아

 


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

 

아래와 같이 변경.

 

style.css

 


/*페이징 */
.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;}

 

아래와 같이 추가.

 

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

 

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

추천
10

댓글 10개

팁 감사합니다.

제가 적용해보니 페이징이 잘 됩니다.
다만, 회원으로 로그인해서 볼때는 페이징이 되는데, 비회원일때는 페이징이 안된 상태로 노출됩니다.

비회원일때도 페이징이 노출되도록 하는 방법은 없을까요?

댓글쓰기 권한을 1로 주면 페이징이 잘 됩니다.
하지만, 댓글쓰기 권한을 2로 주면 페이징이 되지 않고, 전체 댓글이 한번에 다 보입니다.
  저도 이 코드를 이용했는데요, 스크립트 아래에

<?php if(!$is_member){?>
    $('#bo_vc_w').remove();
<?php } ?>
추가하시면 됩니다.
오! 진짜 쓸만한 댓글 페이징이네요~ 직접 만들어서 오픈해주시닝~ 대단!
문제 없이 제대로 작동 되어서 좋아요
전체 10 |RSS
그누보드5 팁자료실 내용 검색
  • 개별 목록 구성 번호 제목 작성자 작성일 추천 조회
  • 게시물이 없습니다.

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT