2011년 8월 24일 수요일

jQuery Mobile을 이용한 List 더보기 구현



ListView Main JSP(historyview.jsp)
<%
String appCode = StringUtil.converNullToBlank(request.getParameter("appcode"));
String userID = UniToKSC(StringUtil.converNullToBlank(request.getParameter("userid")));
String deviceID = StringUtil.converNullToBlank(request.getParameter("deviceid"));
NotiHistoryService service = new NotiHistoryService();
List<NotiHistory> history = service.getHistory(appCode, userID, deviceID, 1, 15);
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css"
rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>


<script>
       var nCount=1;
       var $listView;
       $(function()
       {          
           $("#btn_more").click(onAdd);
           $listView = $("#listView");

       });
      
       function onAdd(){
        nCount++;
        $.ajax({
        type: 'get',
        async: true,
        url: './morehistory.jsp?appcode=<%=appCode%>&userid=<%=userID%>&deviceid=<%=deviceID%>&page='+nCount+'&rowsize=15',
        success: function(data) {
        var response = data.trim();
        if(response == "") {
        alert('리스트가 더 없습니다.');
        } else {
            $(response).appendTo($listView);
            $("#listView").listview("refresh");        
        }
        },
        error: function(data, status, err) {
                   alert('서버와의 통신이 실패했습니다.');
            }
        });
          
       }
   </script>

</head>

<body>

<div data-role="page" id="history">
<div data-role="content">
<ul data-role="listview"  id="listView">
<%
if (history != null && history.size() > 0) {
for(NotiHistory h: history) {
%>
<li><a href="./notidetail.jsp?seq=<%=h.getSeq() %>" data-rel="dialog">
<%=h.getMsgHeader()%><br>
<%=h.getMsgBody()%><br>
</a>
</li>
<%
}
} else {
%>
<li>전송된 알람이 아직 없습니다.</li>
<%
}
%>
</ul>
<%
if (history != null && history.size() > 0) {
%>
<br>
<input type="button" data-icon="plus" id="btn_more" value="15개 더보기"/>
<%
}
%>

</div>
</div>
</body>
</html>

morehistory.jsp
<%@page import="java.io.UnsupportedEncodingException"%>
<%@page import="com.hs.mobile.push.service.vo.NotiHistory"%>
<%@page import="java.util.List"%>
<%@page import="com.hs.commons.utils.StringUtil"%>
<%@page import="com.hs.mobile.push.service.NotiHistoryService"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.hs.mobile.push.service.CommonQueryService"%>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>

<%
String appCode = StringUtil.converNullToBlank(request.getParameter("appcode"));
String userID = StringUtil.UniToKSC(StringUtil.converNullToBlank(request.getParameter("userid")));
String deviceID = StringUtil.converNullToBlank(request.getParameter("deviceid"));
int nPage = StringUtil.sToi(request.getParameter("page"),1);
int rowsize = StringUtil.sToi(request.getParameter("rowsize"),15);

NotiHistoryService service = new NotiHistoryService();
List<NotiHistory> history = service.getHistory(appCode, userID, deviceID, nPage, rowsize);
%>
<%
if (history != null && history.size() > 0) {
for(NotiHistory h: history) {
%>
<li><a href="./notidetail.jsp?seq=<%=h.getSeq() %>" data-rel="dialog">
<%=h.getMsgHeader()%><br>
<%=h.getMsgBody()%><br>
</a>
</li>
<%
}
}
%>

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...