댓글 페이징 달기. 정보
댓글 페이징 달기.관련링크
첨부파일
본문
그누보드의 경우
댓글이 무한정으로 달릴경우
레이아웃이 하단으로 무한정 길어집니다.
레이아웃이나, 길어지는게 보기 좋지 않은분들을 위한 댓글 페이징 기능입니다.
코드하단에 아래 스크립트 추가.
$(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
댓글 10개
멋진 기능 감사합니다
감사합니다!
감사합니다
감사합니다.
유용한 팁입니다~ 감사합니다.
저기. 페이지가 10페이지가 넘어서면 이전 이후 기능도 있는지요? 부디... 있다면 금상첨화일텐데...
팁 감사합니다.
제가 적용해보니 페이징이 잘 됩니다.
다만, 회원으로 로그인해서 볼때는 페이징이 되는데, 비회원일때는 페이징이 안된 상태로 노출됩니다.
비회원일때도 페이징이 노출되도록 하는 방법은 없을까요?
댓글쓰기 권한을 1로 주면 페이징이 잘 됩니다.
하지만, 댓글쓰기 권한을 2로 주면 페이징이 되지 않고, 전체 댓글이 한번에 다 보입니다.
제가 적용해보니 페이징이 잘 됩니다.
다만, 회원으로 로그인해서 볼때는 페이징이 되는데, 비회원일때는 페이징이 안된 상태로 노출됩니다.
비회원일때도 페이징이 노출되도록 하는 방법은 없을까요?
댓글쓰기 권한을 1로 주면 페이징이 잘 됩니다.
하지만, 댓글쓰기 권한을 2로 주면 페이징이 되지 않고, 전체 댓글이 한번에 다 보입니다.
@크림빵1 저도 이 코드를 이용했는데요, 스크립트 아래에
<?php if(!$is_member){?>
$('#bo_vc_w').remove();
<?php } ?>
추가하시면 됩니다.
<?php if(!$is_member){?>
$('#bo_vc_w').remove();
<?php } ?>
추가하시면 됩니다.
오! 진짜 쓸만한 댓글 페이징이네요~ 직접 만들어서 오픈해주시닝~ 대단!
문제 없이 제대로 작동 되어서 좋아요
문제 없이 제대로 작동 되어서 좋아요
감사합니다.
