241
No
컨트롤러 의 페이지 처리와 같다.
view 에서 list 번호를 주고 마지막 데이터의 번호를 ajax 로 컨트롤로에 넘겨주면
컨트롤러 에서 해당 리스트의 데이터를 반환해 주면 된다.
컨트롤러
@Controller
@RequestMapping(value="/gallery/view")
public class GalleryController {
private static final String JSP_PAGE ="/view/gallery";
private Logger logger=LoggerFactory.getLogger(GalleryController.class);
@Inject
private GalleryService service;
private static String UPLOAD_PATH="resources/gallery/";
@RequestMapping(value="/list.do", method=RequestMethod.GET)
public String galleryPage(PageAndSearch pas ,Model model){
try {
//페이지 나누기 관련 처리
if(pas.getCurPage()==null){pas.setCurPage(1);}
int count =service.galleryCount();
Pager.PAGE_SCALE=21;
Pager pager =new Pager(count, pas.getCurPage());
int start =pager.getPageBegin();
int end =pager.getPageEnd();
List<GalleryDTO> galleryList =service.galleryList(start, end);
for(GalleryDTO dto :galleryList){
String filePath =dto.getFilePath();
String front=filePath.substring(0, 12);
String fileEnd=filePath.substring(14);
dto.setFilePath(front+fileEnd);
}
model.addAttribute("pager", pager);
model.addAttribute("galleryList", galleryList );
} catch (Exception e) {
e.printStackTrace();
}
return JSP_PAGE+"/gallery";
}
@RequestMapping(value="/morelist")
public String moreList(@RequestParam("lastID") Integer lastID, Model model) throws Exception{
logger.info(" 받아온 값은 lastID 값 : " + lastID);
int start=lastID;
int end=lastID+21;
List<GalleryDTO> galleryList =service.galleryList(start, end);
for(GalleryDTO dto :galleryList){
String filePath =dto.getFilePath();
String front=filePath.substring(0, 12);
String fileEnd=filePath.substring(14);
dto.setFilePath(front+fileEnd);
}
model.addAttribute("galleryList", galleryList );
model.addAttribute("lastID", end+1);
return JSP_PAGE+"/moreList";
}
}
mapper
<select id="galleryList" resultType="com.macaronics.www.user.model.dto.GalleryDTO">
select * from
(
select rownum as rn , A.* FROM (
select rownum, IDX, FILENAME, FILETYPES, FILEPATH from TBL_GALLERY
where idx > 0 order by idx desc
) A
) where rn BETWEEN #{start} and #{end}
</select>
gallery.jsp
<!-- Start gallery -->
<div class="aa-gallery-content">
<!-- Start gallery image -->
<div class="aa-gallery-body">
<c:forEach items="${galleryList }" var="row" varStatus="status" >
<!-- start single gallery image -->
<div class="aa-single-gallery" id="${status.index+1}">
<div class="aa-single-gallery-item">
<div class="aa-single-gallery-img">
<a href="#">
<img src="/resources/gallery${row.filePath }"
alt="img" style="max-width:341px; max-height: 180px;
border:2 solid #CDCDCD;padding:2px;
"></a>
</div>
<div class="aa-single-gallery-info">
<a href="#"><span class="fa fa-search"></span></a>
</div>
<div class="portfolio-detail">
<a href="#" class="modal-close-btn"><span class="fa fa-times"></span></a>
<img src="/resources/gallery${row.filePath }" alt="img-2" />
<h2>Mobile Application</h2>
<p>Macarnoics SHOP</p>
<a href="#" class="view-project-btn">${row.fileName}</a>
</div>
</div>
</div>
</c:forEach>
</div>
<div id="lastPostsLoader"></div>
</div>
status.indext 는 0부터 시작되어서 +1 을 해 주었다.
javaScript
화면이 로드 되자 마자 윈도우 스크롤을 높이를 정해준다.
lastPostFunc 함수 를 호출 한다.
이미지를 가져오는 동안 로딩 중임을 표시한다.
$('div#lastPostsLoader').html('<img src="/resources/view/img/gallery/fancybox_loading@2x.gif">');
jsp 에서 id 값에 번호를 준다음 list 에서 jquery 로 마지막 데이터의 번호를
가져온다.
$(".aa-single-gallery:last").attr("id")
이것을 ajax 로 데이터를 가져와서 뿌려 주면 된다.
function lastPostFunc()
{
$('div#lastPostsLoader').html('<img src="/resources/view/img/gallery/fancybox_loading@2x.gif">');
$.get("/gallery/view/morelist?lastID=" + $(".aa-single-gallery:last").attr("id"),
function(data){
if (data != "") {
$(".aa-single-gallery:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastPostFunc();
}
});
ajax 로 컨트롤 호출시 반환 값으로 morelist.jsp 페이지로 리턴해서 데이터를 가져와서
뿌려 주는 방식을 취했다.
lastID 값도 계산하여 model 에 저장 하였다.
JSON 을 이용하려면 Handler.bar 로 사용 해라.
@RequestMapping(value="/morelist")
public String moreList(@RequestParam("lastID") Integer lastID, Model model) throws Exception{
logger.info(" 받아온 값은 lastID 값 : " + lastID);
int start=lastID;
int end=lastID+21;
List<GalleryDTO> galleryList =service.galleryList(start, end);
for(GalleryDTO dto :galleryList){
String filePath =dto.getFilePath();
String front=filePath.substring(0, 12);
String fileEnd=filePath.substring(14);
dto.setFilePath(front+fileEnd);
}
model.addAttribute("galleryList", galleryList );
model.addAttribute("lastID", end+1);
return JSP_PAGE+"/moreList";
}
moreList.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:forEach items="${galleryList }" var="row" varStatus="status" >
<!-- start single gallery image -->
<div class="aa-single-gallery" id="${lastID +(status.index+1)}">
<div class="aa-single-gallery-item">
<div class="aa-single-gallery-img">
<a href="#"><img src="/resources/gallery${row.filePath }"
alt="img" style="max-width:341px; max-height: 180px;
border:2 solid #CDCDCD;padding:2px;
"></a>
</div>
<div class="aa-single-gallery-info">
<a href="#"><span class="fa fa-search"></span></a>
</div>
<div class="portfolio-detail">
<a href="#" class="modal-close-btn"><span class="fa fa-times"></span></a>
<img src="/resources/gallery${row.filePath }" alt="img-2" />
<h2>PHOTOFOLIO of JUHO CHOI</h2>
<p>Macarnoics SHOP</p>
<a href="#" class="view-project-btn">${row.fileName}</a>
</div>
</div>
</div>
</c:forEach>
댓글 ( 4)
댓글 남기기