마카로닉스

147 No

스프링 댓글 페이지 나누기

2017-09-03 18:46:12 By 머나먼나라 0 968 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

DB table - mysql

create table board_comment (

comment_idx int AUTO_INCREMENT  primary key ,
board_idx int not null,
userid varchar(50) not null,
content text not null,
post_date Timestamp default now()
);

DTO


@Data
public class BoardCommentDTO {
	private int comment_idx;
	private int board_idx;
	private String userid;
	private String content;
	private Date post_date;
}

mapper 처리

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!-- 다른 mapper와 중복되지 않도록 네임스페이스 기재 -->
<mapper namespace="boardComment.Mapper">
	
	<select id="commentList" resultType="BoardCommentDTO">
		select * from board_comment where board_idx =#{board_idx} order by post_date desc limit #{pageStart}, #{perPageNum}
	</select>

	
	
</mapper>

크리테리아

public class Criteria {

	private int page;
	private int perPageNum;
	
	public Criteria(){
		this.page=1;
		this.perPageNum=10;
		
	}
	
	
	public void setPage(int page){
		if(page <=0){
			this.page=1;
			return;
		}
		this.page =page;
	}
	
	
    
	public void setPerPageNum(int perPageNum) {
		
		if(perPageNum <=0 || perPageNum >100){
			this.perPageNum =10;
			return;
		}
		this.perPageNum = perPageNum;
	}
	
	
	
	public int getPage() {
		return page;
	}
	
	
	//method for MyBatis SQL Mapper--
	
	public int getPageStart(){
		
		return (this.page-1) * perPageNum;
	}
	
	
	// method for MyBatis SQL Mapper
	public int getPerPageNum(){
		return this.perPageNum;
	}


	@Override
	public String toString() {
		return "Criteria [page=" + page + ", perPageNum=" + perPageNum + "]";
	}
	
	
	
	
	
}

페이지 메이커

@Data
public class PageMaker {

	private int totalCount;
	private int startPage;
	private int endPage;
	private boolean prev;
	private boolean next;
	
	private int tempEndPage; //마지막 페이지
	
	
	private int displayPageNum =10;
	
	private Criteria cri;
	
	public void setTotalCount(int totalCount) {
		this.totalCount = totalCount;
		
		calcData();
	}
	
	
	private void calcData(){
		
			endPage =(int)(Math.ceil(cri.getPage()/(double)displayPageNum)*displayPageNum);
			
			startPage =(endPage - displayPageNum) +1;
			
			tempEndPage =(int)(Math.ceil(totalCount/(double)cri.getPerPageNum()));
		
			if(endPage >tempEndPage){
				endPage=tempEndPage;
			}
			
			prev =startPage ==1 ? false :true;
			next =endPage *cri.getPerPageNum() >=totalCount ? false :true;
	}
	
	
	public String makeQuery(int page){
		
		UriComponents uriComponents =
				UriComponentsBuilder.newInstance()
				.queryParam("page", page)
				.queryParam("perPageNum", cri.getPerPageNum())
				.build();
		return uriComponents.toUriString();
	}
	
	
}

DAO

	@Override
	public List commentList(int board_idx,  PageMaker page) {
		List list=null;
		try{
			Map map =new HashMap<>();
			map.put("pageStart", page.getCri().getPageStart());
			map.put("perPageNum", page.getCri().getPerPageNum());
			map.put("board_idx", board_idx);
			
			list=sqlSession.selectList(namespace+".commentList", map);
		}catch(Exception e){
			e.printStackTrace();
		}
		
		return list;
	}

컨트롤

	//2. @RequestParam 방식 
	@RequestMapping(value="/comment_list.do", method=RequestMethod.GET)
	public @ResponseBody ResponseEntity> comment_list2(@RequestParam Integer curpage , @RequestParam int board_idx){
		

		ResponseEntity> entity=null;
		try {
			
			/* sql ex) select comment_count from board_v where idx =762*/
			
			int count =service.commentCount(board_idx);
			
			Criteria cri =new Criteria();
			cri.setPerPageNum(5);
			cri.setPage(curpage);
			
			PageMaker page =new PageMaker();
			page.setCri(cri);
			page.setTotalCount(count);
			
			
			List commentList=service.commentList(board_idx, page);
			logger.info("카운트 갯수  :" + count + "  page : "+ page.toString());
			
			
			
			Map map =new HashMap<>();
			map.put("pageMaker", page);
			map.put("commentList", commentList);
			
			
			entity =new ResponseEntity>(map  ,HttpStatus.OK);
		} catch (Exception e) {
			entity =new ResponseEntity>(HttpStatus.BAD_REQUEST);
		}
		
		return entity;
	}

html

<h3>댓글 목록</h3>

<div id="LplyUL" style="margin-bottom: 20px;">


</div>
<div class="pagination">

</div>

javascript 처리

<script type="text/javascript">

$(document).ready(function(){
	var idx ="${param.idx}";
	var curpage=1;
	comment_list(idx, curpage)
	
	$("#btnSave").click(function(){
		
		var comment_content =$("#comment_content").val();
		var board_idx ="${view.idx}";
		var userid="${loginUser.userid}";
		//alert(comment_content);
		$.ajax({		
			url : "/board/comment_insert.do",
			type:"post",
		/* 	headers:{
				"Content-Type" :"application/json",
				"X-HTTP-Method-Override" :"POST"
			},
			dataType:"text", 
			
				또는 => contentType:"application/json", 한줄 코딩
			*/
			contentType:"application/json",
			
			data:JSON.stringify({
				board_idx :board_idx,
				userid : userid,
				content :comment_content
				
			}),
			
			success:function(result){
				
				if(result=="SUCCESS"){
					
					$("#comment_content").val("");
					
					comment_list(board_idx, curpage);
					
					
					
				}else{
					alert("등록에 실패 하였습니다.");
				}
			}
			
		});	
		
	});
	
	$(".pagination").on("click", "ul > li a", function(event){
			event.preventDefault();
			
			page =$(this).attr("href");
			comment_list(idx, page.trim());
			//alert("클릭");
	});
	
	
	
});




function comment_list(board_idx, curpage){
	
 	$.getJSON("/board/comment_list.do?board_idx="+board_idx + "&curpage="+curpage, function(data){
		
		printData(data.commentList, $("#LplyUL"), $("#template"));
		pagination(data.pageMaker);
		
	});	
	
}



var printData =function (replyArr, targetDiv, handleBarTemplateName){
	
	var template =Handlebars.compile(handleBarTemplateName.html());
	
	var html =template(replyArr);
	targetDiv.html(html);
}



 
 
var pagination =function(pageMaker){

	 var idx ="${param.idx}";
	 
	 var str3 = "<ul>";
	 
	 if(pageMaker.cri.page >1){
		str3 += '<li><a href="1">[시작]</a></li>';
	 }
	 
	 if(pageMaker.prev){
		 str3 +="<li><a href='"+( pageMaker.startPage-1) +"' >&laquo;</a></li>";
	 }
	 
	 for(var i=pageMaker.startPage, len=pageMaker.endPage ; i <=len ; i++){
		 var strClass=pageMaker.cri.page ==i ? 'class="active"  style="background-color: #E85356;"' : '';
		 //str3 +="<li " +strClass + " > <a href='javascript:" +comment_list(idx, i)+";' >"+i+"</a></li>";
	 	str3 +="<li "+strClass+"><a href='"+i+"' >" +i +" </a></li>"
	 }
	 
	 
	 if(pageMaker.next){
		 str3 +="<li ><a href='"+( pageMaker.endPage +1)+ "' > &raquo;</a></li>";
	 }
	 
	 
	 if(pageMaker.cri.page < pageMaker.tempEndPage){
		 str3 +="<li><a href='"+pageMaker.tempEndPage+"'>[끝]</a></li>";
	 }
		 
	 
	str3 += "</ul>";
	 $(".pagination").html(str3);
	 

}
 
 
</script>

CSS 처리

.pagination {
  height: 40px;
  margin: 20px 0;
}
.pagination ul {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  margin-left: 0;
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.pagination ul > li {
  display: inline;
}
.pagination ul > li > a,
.pagination ul > li > span {
  float: left;
  padding: 0 14px;
  line-height: 38px;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-left-width: 0;
}
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: #f5f5f5;
}
.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #a0a0a0;
  cursor: default;
}
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
  color: #a0a0a0;
  background-color: transparent;
  cursor: default;
}
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px;
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.pagination-centered {
  text-align: center;
}
.pagination-right {
  text-align: right;
}