테이블형태가 아닌 div형 게시판 무한 스크롤 진행
본문
여기 게시판을 사용하고 있는데 살짝 변형하여 사용중에 있습니다(크게 변형하지 않음)
지금 게시판 리스트 페이지 네이션으로 작동되고 있는데, 123페이지가아닌 무한 스크롤형으로 구현하려고합니다.
테이블 방식이였으면 기존 참고자료로 구현이 가능할것으로 보이는데, div방식으로 되어있다보니 어렵네요 ㅠㅠ
고수님들의 답변 부탁드립니다.
<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('<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();
}
if(roll_page == total_page){
$(".btmScroll").slideUp();
}
}, 1000);
},
error: function(xhr, status, error) {
alert(error);
}
});
}
</script>
테이블 방식은 이런식으로 스크립트를 구현해 놓았는데, div로 바꾸기에 너무 어려움이 보여 자문을 구해봅니다.
답변 3
tbody에 추가 삭제되는걸 컨텐츠div로만 바꾸면 될거같은데요
<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>
이렇게 하였더니 되질 않더라구요 ㅠㅠ 제가 개념을 이해를 못한건지...
이런식으로 떠버리네요 ㅠ
div가 아이디가 부여된 대상을 찾아서 나눠주셔야 될거같습니다
그냥 div로하기엔 해당페이지내에 div로 만들어진 모든 부분들이 나눠지게 될거에요
대싱아 될 div에 id나 class를 부여해서 하댕 타겟에 추가시켜보세요
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]);
이부분을 말씀하시는게 맞으실까요?
네 append prepend 부분은 타겟이 있는데
slit 하는부분이 div만 잡고잇으니 어떤 타겟인지 알수가없어서 제대로 안나올거에요
<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>');
이런식으로 고치면 될까요?
<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>
이런식으로 하였는데, 하나씩 나오고, item에 들어있는 div요소들이 다 나오지 않습니다 ㅠㅠ
