board/read.html
페이지 정보
본문
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{include/layout.html}">
<body>
<div layout:fragment="content">
<br>
<center>
<h1>READ</h1>
<table width="700" border="1">
<tr>
<th width="50">제목</th>
<td th:text="${dto.title}"></td>
</tr>
<tr>
<th>내용</th>
<td th:utext="${#strings.replace(dto.content, changeLine, '<br/>')}"></td>
</tr>
<tr>
<th>작성자</th>
<td>[[${dto.writer}]]</td>
</tr>
</table>
<table width="700" border="0">
<tr>
<td><a th:href="|@{list}?${pageRequestDTO.link}|">[목록]</a></td>
<td align="right">
<a th:href="|@{modify(bno=${dto.bno})}&${pageRequestDTO.link}|">[수정]</a>
<a th:href="@{remove(bno=${dto.bno})}">[삭제]</span>
</td>
</tr>
</table>
<!-- 댓글 작성-->
<br>
<table width="700" border="0">
<tr>
<td style="color:#aaa">댓글 목록</td>
<td align="right">
<button>댓글 작성</button>
</td>
</tr>
</table>
<!-- 댓글 목록 -->
<style>
.replyList{
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
}
.pageTd {
border:1px solid #bbb;
min-width: 20px;
text-align:center;
padding:2px 0px;
}
</style>
<table width="700" border="0" class="replyList"></table>
<!-- 댓글 페이징 -->
<table width="700" border="0" class="replyPaging"></table>
</center>
<br>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/js/reply.js"></script>
</div>
<th:block layout:fragment="script">
<script th:inline="javascript">
const bno = [[${dto.bno}]]
const replyList = document.querySelector('.replyList') //댓글 목록 DOM
const replyPaging = document.querySelector('.replyPaging') //페이지 목록 DOM
function printList(dtoList){ //댓글 목록 출력
let str = '';
if(dtoList && dtoList.length > 0){
for (const dto of dtoList) {
str += `<tr>
<td width="35">${dto.rno}</td>
<td data-rno="${dto.rno}">${dto.replyText}</td>
<td width="70">${dto.replyer}</td>
<td width="190">${dto.regDate}</td>
</tr>`
}
}
//console.log(str);
replyList.innerHTML = str
}
function printPages(data){ //페이지 목록 출력
//pagination
let pageStr = '';
if(data.prev) {
pageStr +=`<td><a data-page="${data.start-1}">PREV</a></td>`
}
for(let i = data.start; i <= data.end; i++){
pageStr +=`<td class="pageTd">
<a data-page="${i}">${i}</a></td>`
}
if(data.next) {
pageStr +=`<td><a data-page="${data.end +1}">NEXT</a></td>`
}
pageStr +=`<td width=100%></td>`
//console.log(pageStr);
replyPaging.innerHTML = pageStr
}
function printReplies(page,size,goLast){
getList({bno, page,size, goLast}).then(
data => {
printList(data.dtoList) //목록 처리
printPages(data) //페이징 처리
}
).catch(e => {
console.error(e)
})
}
printReplies(1,5,true) //마지막 페이지 호출 : true , false
//ReplyServiceImpl - 목록 메서드 - Sort.by("rno").descending()) 작성순으로 출력 구현을 했다면 false
//댓글 페이징 클릭
let page = 1
let size = 5
replyPaging.addEventListener("click", function (e){
e.preventDefault()
e.stopPropagation()
const target = e.target
if(!target || target.tagName != 'A'){
return
}
const pageNum = target.getAttribute("data-page")
page = pageNum
printReplies(page, size)
},false)
</script>
</th:block>
</body>
</html>
- 이전글js/reply.js 24.06.25
- 다음글● 댓글 페이징 링크 처리 24.06.25
댓글목록
등록된 댓글이 없습니다.