테이블형태가 아닌 div형 게시판 무한 스크롤 진행 채택완료

qoqofh 4년 전 조회 1,909

https://sir.kr/g5_skin/40277?sca=%EA%B2%8C%EC%8B%9C%ED%8C%90&sfl=wr_subject%7C%7Cwr_content&stx=%ED%94%8C%EB%A1%9C%ED%84%B0

여기 게시판을 사용하고 있는데 살짝 변형하여 사용중에 있습니다(크게 변형하지 않음)

지금 게시판 리스트 페이지 네이션으로 작동되고 있는데, 123페이지가아닌 무한 스크롤형으로 구현하려고합니다.

테이블 방식이였으면 기존 참고자료로 구현이 가능할것으로 보이는데, div방식으로 되어있다보니 어렵네요 ㅠㅠ

고수님들의 답변 부탁드립니다.

</p>

<p><script></p>

<p>    var total_page = "<?=$total_page?>";

    var now_page = "<?=$page?>";

    var roll_page = now_page;

    

    $(window).ready(function(){

        console.log(now_page);

        if(now_page != 1){

            $(".topScroll").show();

        }</p>

<p>        if(roll_page != total_page){

            $(".btmScroll").show();

        }

    });</p>

<p>    $(window).scroll(function(){

        var chkBtm = parseInt($(document).height()) - parseInt($(window).height());

        

        if(chkBtm == $(window).scrollTop()){

            

            roll_page++;

            

            if(roll_page <= total_page){

                callContent(roll_page,'append');

            }

        }else if($(window).scrollTop() == 0){

            

            now_page--;

            if(now_page > 0){

                callContent(now_page,'prepend');

            }

            

        }

    });</p>

<p>    function callContent(a,b){</p>

<p>        if(b=='append'){

            $(".moreBtm").slideDown();

        }else{

            $(".moreTop").slideDown();

        }

        var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;

        var tbody = "";

        var thtml = "";

        $.ajax({

            type:"POST",

            url:url,

            dataType : "html",

            success: function(html){

                tbody = html.split('<tbody>');

                thtml = tbody[1].split('</tbody>');

                setTimeout(function() { 

                    if(b=='append'){

                        $(".tbl_head01").find('tbody').append(thtml[0]);

                    }else{

                        $(".tbl_head01").find('tbody').prepend(thtml[0]);

                    }

                    $(".moreBar").slideUp();

                    

                    if(now_page == 1){

                        $(".topScroll").slideUp();

                    }</p>

<p>                    if(roll_page == total_page){

                        $(".btmScroll").slideUp();

                    }

                }, 1000);

                

            },

            error: function(xhr, status, error) {

                alert(error);

            }  

        });

    }</p>

<p></script></p>

<p>

테이블 방식은 이런식으로 스크립트를 구현해 놓았는데, div로 바꾸기에 너무 어려움이 보여 자문을 구해봅니다.

#무한 #스크롤 #리스트 #페이지

댓글을 작성하려면 로그인이 필요합니다.

답변 3개

정렬:

채택된 답변

+20 포인트

병원에서일해요

4년 전

tbody에 추가 삭제되는걸 컨텐츠div로만 바꾸면 될거같은데요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

qoqofh

4년 전

[code]
<script>

var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;

$(window).ready(function(){
console.log(now_page);
if(now_page != 1){
$(".topScroll").show();
}

if(roll_page != total_page){
$(".btmScroll").show();
}
});

$(window).scroll(function(){
var chkBtm = parseInt($(document).height()) - parseInt($(window).height());

if(chkBtm == $(window).scrollTop()){

roll_page++;

if(roll_page <= total_page){
callContent(roll_page,'append');
}
}else if($(window).scrollTop() == 0){

now_page--;
if(now_page > 0){
callContent(now_page,'prepend');
}

}
});

function callContent(a,b){

if(b=='append'){
$(".moreBtm").slideDown();
}else{
$(".moreTop").slideDown();
}
var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
var tbody = "";
var thtml = "";
$.ajax({
type:"POST",
url:url,
dataType : "html",
success: function(html){
tbody = html.split('<div>');
thtml = tbody[1].split('</div>');
setTimeout(function() {
if(b=='append'){
$(".tbl_head01").find('div').append(thtml[0]);
}else{
$(".tbl_head01").find('div').prepend(thtml[0]);
}
$(".moreBar").slideUp();

if(now_page == 1){
$(".topScroll").slideUp();
}

if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);

},
error: function(xhr, status, error) {
alert(error);
}
});
}

</script>
[/code]

이렇게 하였더니 되질 않더라구요 ㅠㅠ 제가 개념을 이해를 못한건지...

[code]
<script>

var total_page = "<?=$total_page?>";
	var now_page = "<?=$page?>";
	var roll_page = now_page;
	
	$(window).ready(function(){
		console.log(now_page);
		if(now_page != 1){
			$(".topScroll").show();
		}

if(roll_page != total_page){
			$(".btmScroll").show();
		}
	});

$(window).scroll(function(){
		var chkBtm = parseInt($(document).height()) - parseInt($(window).height());
		
		if(chkBtm == $(window).scrollTop()){
			
			roll_page++;
			
			if(roll_page <= total_page){
				callContent(roll_page,'append');
			}
		}else if($(window).scrollTop() == 0){
			
			now_page--;
			if(now_page > 0){
				callContent(now_page,'prepend');
			}
			
		}
	});

function callContent(a,b){

if(b=='append'){
			$(".moreBtm").slideDown();
		}else{
			$(".moreTop").slideDown();
		}
		var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
		var tbody = "";
		var thtml = "";
		$.ajax({
			type:"POST",
			url:url,
			dataType : "html",
			success: function(html){
				tbody = html.split('<div>');
				thtml = tbody[1].split('</div>');
				setTimeout(function() { 
					if(b=='append'){
						$(".tbl_head01").find('div').append(thtml[0]);
					}else{
						$(".tbl_head01").find('div').prepend(thtml[0]);
					}
					$(".moreBar").slideUp();
					
					if(now_page == 1){
						$(".topScroll").slideUp();
					}

if(roll_page == total_page){
						$(".btmScroll").slideUp();
					}
				}, 1000);
				
			},
			error: function(xhr, status, error) {
				alert(error);
			}  
		});
	}

</script>
[/code]

이렇게 하였더니 되질 않더라구요 ㅠㅠ 제가 개념을 이해를 못한건지...

댓글을 작성하려면 로그인이 필요합니다.

병원에서일해요

4년 전

div가 아이디가 부여된 대상을 찾아서 나눠주셔야 될거같습니다

그냥 div로하기엔 해당페이지내에 div로 만들어진 모든 부분들이 나눠지게 될거에요

대싱아 될 div에 id나 class를 부여해서 하댕 타겟에 추가시켜보세요

로그인 후 평가할 수 있습니다

답변에 대한 댓글 4개

qoqofh

4년 전

tbody = html.split('<div>');
thtml = tbody[1].split('</div>');

이부분과

setTimeout(function() {
if(b=='append'){
$(".tbl_head01").find('div').append(thtml[0]);
}else{
$(".tbl_head01").find('div').prepend(thtml[0]);

이부분을 말씀하시는게 맞으실까요?

�

병원에서일해요

4년 전

네 append prepend 부분은 타겟이 있는데

slit 하는부분이 div만 잡고잇으니 어떤 타겟인지 알수가없어서 제대로 안나올거에요

qoqofh

4년 전

<div class="portfolio__grid hover--one three--columns tbl_head01 tbl_wrap">
<div class="item"></div>
</div>

구조가 이렇게 되어있어서, 테이블 구조로 보자면 ,

<div class="portfolio__grid hover--one three--columns tbl_head01 tbl_wrap">
<table>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
이렇게 된다라는 가정이면, tr이 늘어나는 개념인데,

<div class="item"></div> 이부분이 tr이라는 개념인데,

tbody = html.split('<div>');
thtml = tbody[1].split('</div>');

이부분을

tbody = html.split('<div class="portfolio__grid hover--one three--columns tbl_head01 tbl_wrap">');
thtml = tbody[1].split('</div>');

이런식으로 고치면 될까요?

qoqofh

4년 전

[code]
<script>

var total_page = "<?=$total_page?>";
var now_page = "<?=$page?>";
var roll_page = now_page;

$(window).ready(function(){
console.log(now_page);
if(now_page != 1){
$(".topScroll").show();
}

if(roll_page != total_page){
$(".btmScroll").show();
}
});

$(window).scroll(function(){
var chkBtm = parseInt($(document).height()) - parseInt($(window).height());

if(chkBtm == $(window).scrollTop()){

roll_page++;

if(roll_page <= total_page){
callContent(roll_page,'append');
}
}else if($(window).scrollTop() == 0){

now_page--;
if(now_page > 0){
callContent(now_page,'prepend');
}

}
});

function callContent(a,b){

if(b=='append'){
$(".moreBtm").slideDown();
}else{
$(".moreTop").slideDown();
}
var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
var tbody = "";
var thtml = "";
$.ajax({
type:"POST",
url:url,
dataType : "html",
success: function(html){
tbody = html.split('<div class="portfolio__grid hover--one three--columns tbl_head01 tbl_wrap">');
thtml = tbody[1].split('</div>');
setTimeout(function() {
if(b=='append'){
$(".tbl_head01").append(thtml[0]);
}else{
$(".tbl_head01").prepend(thtml[0]);
}
$(".moreBar").slideUp();

if(now_page == 1){
$(".topScroll").slideUp();
}

if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);

},
error: function(xhr, status, error) {
alert(error);
}
});
}

</script>
[/code]

이런식으로 하였는데, 하나씩 나오고, item에 들어있는 div요소들이 다 나오지 않습니다 ㅠㅠ

[code]
<script>

if(roll_page != total_page){
			$(".btmScroll").show();
		}
	});

function callContent(a,b){

if(b=='append'){
			$(".moreBtm").slideDown();
		}else{
			$(".moreTop").slideDown();
		}
		var url = "<?=G5_BBS_URL?>/board.php?bo_table=<?=$bo_table?>&page="+a;
		var tbody = "";
		var thtml = "";
		$.ajax({
			type:"POST",
			url:url,
			dataType : "html",
			success: function(html){
				tbody = html.split('<div class="portfolio__grid hover--one three--columns tbl_head01 tbl_wrap">');
				thtml = tbody[1].split('</div>');
				setTimeout(function() { 
					if(b=='append'){
						$(".tbl_head01").append(thtml[0]);
					}else{
						$(".tbl_head01").prepend(thtml[0]);
					}
					$(".moreBar").slideUp();
					
					if(now_page == 1){
						$(".topScroll").slideUp();
					}

if(roll_page == total_page){
						$(".btmScroll").slideUp();
					}
				}, 1000);
				
			},
			error: function(xhr, status, error) {
				alert(error);
			}  
		});
	}

</script>
[/code]

이런식으로 하였는데, 하나씩 나오고, item에 들어있는 div요소들이 다 나오지 않습니다 ㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

끄끄

4년 전

이런식으로 떠버리네요 ㅠ

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

테이블형태가 아닌 div형 게시판 무한 스크롤 진행 채택완료

답변 3개

답변에 대한 댓글 1개

답변에 대한 댓글 4개

공유하기