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>
<%
}
}
%>

댓글 없음:

댓글 쓰기

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...