test.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>AJAX TEST</h1>
Total : <span id="total_conunt"></span>
<style>
#modDiv {
width: 300px;
height: 100px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
padding: 10px;
z-index: 1000;
}
.active{
font-weight:bold;
}
</style>
<!-- MOD 버튼 -->
<table id='modDiv' style="display:none;">
<tr>
<td class='modal-title'></td>
</tr>
<tr>
<td><input type='text' id='replytext'></td>
</tr>
<tr>
<td>
<button type="button" id="replyModBtn">수정</button>
<button type="button" id="replyDelBtn">삭제</button>
<button type="button" id='closeBtn'>닫기</button>
</td>
</tr>
</table>
<!-- 글 작성 -->
<table width=700 border=1>
<tr>
<td>글쓴이</td>
<td><input type='text' name='replyer' id='newReplyWriter'></td>
<td>댓글 내용</td>
<td><input type='text' name='replytext' id='newReplyText'></td>
<td></td>
<td><button id="replyAddBtn">댓글 작성</button></td>
</tr>
</table>
<br>
<!-- 댓글 목록 출력 영역 -->
<table id="replies" width=700 border=1></table>
<!-- 페이징 영역 -->
<table>
<tr class="pagination"></tr>
</table>
</center>
<script th:inline="javascript">
var bno = 20; // t_board에서 존재하는 boardIdx값 입력
var replyPage = 1;
getPageList(1);
getAllList(); //호출
// 게시물 수
function getAllList() { // 리스트 출력 확인후 목록 갱신시 함수 호출로 처리
$.getJSON("/replies/all/"+bno,
function(data){
$("#total_conunt").text(data.length); //리스트 갯수
}
);
}
// 글 등록
$("#replyAddBtn").on("click",function(){
var replyer = $("#newReplyWriter").val();
var replytext = $("#newReplyText").val();
$.ajax({
type: 'post',
url: '/replies/',
headers: {
"Content-Type" : "application/json"
},
dataType: 'text',
data:JSON.stringify({
bno : bno,
replyer : replyer,
replytext : replytext
}),
success: function(result){
if(result == 'success'){
alert("글 등록됨");
//getAllList();
getPageList(1);
//글 작성후 null처리
$("#newReplyWriter").val("");
$("#newReplyText").val("");
}
}
});
});
//mode 열기
$("#replies").on("click", ".replyLi button", function() {
var reply = $(this).parent(); //자기 자신의 부모 요소를 선택한다. <tr>
var rno = reply.attr("data-rno");
var replytext = reply.attr("data-str");
//alert(rno + " : " + replytext);
$(".modal-title").html(rno);
$("#replytext").val(replytext);
$("#modDiv").show("slow");
});
// mode 닫기
$("#closeBtn").on("click", function() {
$("#modDiv").hide("slow");
//getAllList();
getPageList(replyPage);
});
// 글 수정
$("#replyModBtn").on("click",function(){
var rno = $(".modal-title").html();
var replytext = $("#replytext").val();
$.ajax({
type:'put',
url:'/replies/'+rno,
headers: {
"Content-Type": "application/json",
"X-HTTP-Method-Override": "PUT"
},
dataType:'text',
data:JSON.stringify({
replytext : replytext
}),
success:function(result){
if(result == 'success'){
alert("수정 되었습니다.");
$("#modDiv").hide("slow");
//getAllList();
getPageList(replyPage);
}
}
});
});
// 글 삭제
$("#replyDelBtn").on("click", function() {
var rno = $(".modal-title").html();
$.ajax({
type : 'delete',
url : '/replies/' + rno,
headers : {
"Content-Type" : "application/json",
"X-HTTP-Method-Override" : "DELETE"
},
dataType : 'text',
success : function(result) {
if (result == 'success') {
alert("삭제 되었습니다.");
$("#modDiv").hide("slow");
//getAllList();
getPageList(1);
}
}
});
});
//페이징
//페이지 번호를 입력받아 데이터를 처리
//서버에서 전송된 데이터 중 댓글 목록인 list 데이터를 이용해서 댓글 내용 표시
//페이징 처리를 위해 만들어진 pageMaker 데이터를 이용해서 printPaging() 호출
function getPageList(page){
$.getJSON("/replies/"+bno+"/"+page , function(data){
var str="";
$(data.list).each( // Map 타입의 속성 list
function(){
str += "<tr>"
+ "<td>"+ this.rno + "</td>"
+ "<td>"+ this.replytext +"</td>"
+ "<td data-rno='"+this.rno+"' data-str='"+this.replytext+"' class='replyLi'><button>mode</button></td>"
+ "</tr>";
}
);
$("#replies").html(str);
printPaging(data.pageMaker); // Map 타입의 속성 pageMaker
});
}
//pageMaker를 이용해서 화면에 페이지 번호를 출력
//상단에 getPageList(1); 추가
function printPaging(pageMaker){
var str = "";
if(pageMaker.prev){
str += "<td><a href='"+(pageMaker.startPage-1)+"'> << </a></td>";
}
for(var i=pageMaker.startPage, len = pageMaker.endPage; i <= len; i++){
var strClass= pageMaker.cri.page == i?'class=active':''; //현페 페이지 클래스 적용
str += "<td "+strClass+"><a href='"+i+"'>"+i+"</a></td>";
}
if(pageMaker.next){
str += "<td><a href='"+(pageMaker.endPage + 1)+"'> >> </a></td>";
}
$('.pagination').html(str);
}
//상단에 replyPage=1; 추가
$(".pagination").on("click", "td a", function(event){
event.preventDefault(); // <a href="">태그의 기본 동작인 페이지 전환을 막는 역활을 한다.
replyPage = $(this).attr("href"); // 클릭된 페이지의 번호를 얻는 역활을 한다.
getPageList(replyPage);
});
</script>
</div>
</body>
</html>
- 이전글■ 페이징 설명 24.06.13
- 다음글● HTML에서 Ajax 처리 ( 냉무 ) 24.06.13
댓글목록
등록된 댓글이 없습니다.