더보기 구현
Thymeleaf: 최초 페이지 로딩시 보여줄 데이터를 그려준다.
Ajax:더보기버튼을 누르면 비동기로 추가되는 페이지를 가져온다.
Thymeleaf
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>boardTimeline</title>
<css th:replace="layout/header::headerCss" />
</head>
<body>
<div th:replace="layout/header::header"/>
<div class="container">
<div class="container-fluid gedf-wrapper">
<div class="row">
<div class="inner">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<div class="h5"><a th:href="@{'/moimDetail/moimTodoList/' + ${moimId}}" class="nav-link " id="allList">되돌아가기</a></div>
<div class="h7 text-muted">Fullname : Miracles Lee Cross</div>
<div class="h7">Developer of web applications, JavaScript, PHP, Java, Python, Ruby, Java, Node.js,
etc.
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="h6 text-muted">Followers</div>
<div class="h5">5.2342</div>
</li>
<li class="list-group-item">
<div class="h6 text-muted">Following</div>
<div class="h5">6758</div>
</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
<!---타임리프적용 \\\\\\\\\\\\\\\\ \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ \\\\\\\\\\ Post-->
<input type="hidden" id="startCount" value="0"/>
<div id="postWrapper" class="col-md-6" >
<div th:each="list: ${boardList}" class="card gedf-card postCard" style="width: 950px; height: auto;">
<div class="card-header postHeader">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-2">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-2">
<div th:text="${list.people.name}" class="h5 m-0"></div>
<div class="h7 text-muted">Miracles Lee Cross</div>
</div>
</div>
</div>
</div>
<div class="card-body" >
<div th:text="${list.createDate}" class="text-muted h7 mb-2"> <i class="fa fa-clock-o"></i>10 min ago</div>
<a class="card-link" href="#">
<h5 th:text="${list.toDoWriteList.toDoWrite.plan_title}" class="card-title"></h5>
<h6 th:text="${list.title}" class="card-title"></h6>
</a>
<div th:utext="${list.memo}" ></div>
</div>
<div class="card-footer">
<a href="#" class="card-link"><i class="fa fa-gittip"></i> Like</a>
<a href="#" class="card-link"><i class="fa fa-mail-forward"></i> Share</a>
</div>
<input type="hidden" id="timeline_moimId" th:value="${list.moim.id}"/>
</div>
<div class="postCard" ></div>
<button type="button" id="moreBtn" onclick="showMoreTimeline()" class="btn btn-primary">더보기</button>
<div id="endMark">---------- CONTENTS END ----------</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">Ajax : showMoreTimeline()
$("#postWrapper .postCard:last").after(timehtml);
//타임라인
function showMoreTimeline(){
id = $('#timeline_moimId').val();
var callLength = $('.postHeader').length; //시작 인덱스
var limit = 3; // 더보기 누를때마다 나타낼 카드수
$.ajax({
url: '/moimDetail/moimTodoList/boardTimelineMore/'+id,
contentType: "application/json; charset=utf-8",
dataType:'json',
processData: false, //데이터를 쿼리 문자열로 변환하는 jQuery 형식 방지
success:function(data){
if(data.code==1){
var board = data.boardList;
var planTitle = data.planTitle
var timehtml = "";
var max = board.length-callLength;
var min = max-limit;
if(min<=0){
min= 0;
$("#moreBtn").hide();
$("#endMark").show();
}
//alert("board.length: "+board.length+" /max :"+max+" /min: "+ min);
for(var i=max-1; i>=min; i--){
timehtml+="<div class='card gedf-card postCard' style='width: 950px; height: auto;'>";
timehtml+='<div class="card-header postHeader">'
timehtml+='<div class="d-flex justify-content-between align-items-center">'
timehtml+='<div class="d-flex justify-content-between align-items-center">'
timehtml+='<div class="mr-2">'
timehtml+='<img class="rounded-circle" width="45" src="https://picsum.photos/50/50">'
timehtml+='</div>'
timehtml+='<div class="ml-2">'
timehtml+='<div class="h5 m-0">'+board[i].people.name+'</div>'
timehtml+='<div class="h7 text-muted">Miracles Lee Cross</div>'
timehtml+='</div>'
timehtml+='</div>'
timehtml+='</div>'
timehtml+='</div>'
timehtml+='<div class="card-body">'
timehtml+='<div class="text-muted h7 mb-2"><i class="fa fa-clock-o"></i>'+board[i].createDate+'</div>'
timehtml+='<a class="card-link" href="#">'
timehtml+='<h5 class="card-title">'+board[i].toDoWriteList.toDoWrite.plan_title+'</h5>'
timehtml+='<h6 class="card-title">'+board[i].title+'</h6></a>'
timehtml+='<p class="card-text">'+board[i].memo+'</p></div>'
timehtml+='<div class="card-footer"><a href="#" class="card-link"><i class="fa fa-gittip"></i> Like</a><a href="#" class="card-link">'
timehtml+='<i class="fa fa-mail-forward"></i> Share</a></div>'
timehtml+='<input type="hidden" id="timeline_moimId" th:value="'+board[i].moim.id+'"/>'
timehtml+='</div>'
}//for
alert("result : " + timehtml);
$("#postWrapper .postCard:last").after(timehtml);
}else{
alert(data.code);
}
},error:function(e){
alert(data.code);
alert(data.message);
}
});
}
내맘대로 개발
제가 찾던 내용이네요. 감사합니다