페이징 처리
1) 전체 회원수 알기 ==> totalCount (17)
2) 한 페이지 당 보여줄 목록 개수 ==> pageSize : 5
3) 페이지 수를 계산 ==> pageCount
totalCount pageSize pageCount
1 ~ 5 5 1
6 ~ 10 2
if( totalCount % pageSize ==0 ) {
pageCount = totalCount/pageSize;
}
else{
pageCount = totalCount/pageSize + 1;
}
====> pageCount = (totalCount-1)/pageSize +1
4) 페이지 수가 정해지면 페이지 네비게이션을 만든다.
5) 페이지 네비게이션에 링크를 걸어 현재 보여줄 페이지값 (cpage)를 파라미터로 넘긴다.
==> 그러면 jsp
6) 그러면 jsp에서는 cpage값을 받는다. (유효성 체크)
7) DB에서 해당 페이지 만큼만 데이터를 가져와 보여준다. 그러기 위해서는 연산을 해야함
DB에서 끊어오기 위한 시작값과 끝값을 계산
이름 순으로 가져오는 쿼리
select * from(
select rownum rn, a.* from
(select * from member order by idx desc) a)
where rn between 1 and 5;cpage pageSize start end
1 5 1 5
2 6 10
end = cpage * pageSize
start = end - (pageSize-1)
memebers.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*,user.domain.*"%>
<jsp:include page="/top.jsp"/>
<% //1.현재 보여줄 페이지 파라미터 값을 받자.
String cpStr=request.getParameter("cpage");
if(cpStr==null) cpStr="1"; //기본적으로 보여줄 페이지를 1페이지로 지정
int cpage = Integer.parseInt(cpStr.trim());
if(cpage<=0){//음수나 0일 경우는 1페이지로 지정
cpage=1;
}
%>
<!-- UserDAO빈을 useBean액션을 이용해서 생성 -->
<jsp:useBean id="userDAO" class="user.persistence.UserDAO" scope="session"/>
<div class="text-left p-5">
<h1>User List [Admin Page]</h1>
<table class="table table-striped mt-5">
<tr>
<th>번호</th>
<th>이름</th>
<th>아이디</th>
<th>연락처</th>
<th>회원상태</th>
<th>수정|삭제</th>
</tr>
<!-- -->
<%
int totalCount = userDAO.getTotalUserCount(); //총 회원수
int pageSize = 5; //한 페이지 당 보여줄 목록 갯수
int pageCount = 1;
if(totalCount>=0){
pageCount = (totalCount-1)/pageSize + 1;
}
if(cpage>pageCount){
cpage=pageCount;
}
//DB에서 끊어오기 위한 시작값과 끝값을 계산하자.
int end = cpage*pageSize;
int start = end-(pageSize-1);
List<UserVO> arr=userDAO.listMember(start,end);
if(arr!=null){
for(UserVO user:arr){
%>
<tr>
<td><%=user.getIdx() %></td>
<td><%=user.getName() %></td>
<td><%=user.getUserid() %></td>
<td><%=user.getAllHp() %></td>
<td><%=(user.getMstate()==0)? "일반회원":(user.getMstate()==1) ? "정지회원":"탈퇴회원"%></td>
<td><a href="#" onclick="edit('<%=user.getIdx()%>')">수정</a>|<a href="javascript:del('<%=user.getIdx()%>')">삭제</a></td>
</tr>
<!-- -->
<%
}
}
%>
<tr>
<td colspan="4" class="text-center">
<ul class="pagination justify-content-center">
<% for(int i=1;i<=pageCount;i++){%>
<li class="page-item <%=(i==cpage)?"active":"" %>"><a class="page-link"href="members.jsp?cpage=<%=i%>"><%=i %></a></li>
<% }%>
</ul>
</td><td colspan="2"><b>총 회원수: <span class="text-danger"><%=totalCount %></span></b></td>
</tr>
</table>
<!--삭제/수정 관련 폼-->
<form name="frm" method="POST">
<input type="hidden" name="idx" id="idx">
</form>
</div>
<script type="text/javascript">
var del=function(midx){
var yn=confirm(midx+"번 회원 정보를 정말 삭제할까요?");
if(yn){
location.href="memberDel.jsp?idx="+midx; //get방식
frm.idx.value=midx;
frm.action="memberDel.jsp";
frm.metho="POST";
frm.submit();
}
}
var edit=function(midx){
$("#idx").val(midx);
$('form[name="frm"]').prop("method","POST")
.prop("action","memberEdit.jsp")
.submit();
}
</script>
<jsp:include page="/foot.jsp"/>UserDAO
/*총 회원 수 가져오기*/
public int getTotalUserCount() throws SQLException{
try {
con=DBUtil.getCon();
String sql="select count(idx) cnt from member";
ps=con.prepareStatement(sql);
rs=ps.executeQuery();
int count=0;
if(rs.next()) {
count = rs.getInt("cnt");
}
return count;
}finally {
close();
}
}
/*모든 회원 목록 가져오기 (페이징 처리 후)*/
public List<UserVO> listMember(int start, int end) throws SQLException{
try {
con=DBUtil.getCon();
String sql="";
StringBuilder buf = new StringBuilder("select * from(")
.append(" select rownum rn, a.* from")
.append(" (select * from member order by idx desc) a)")
.append(" where rn between ? and ?");
sql=buf.toString();
ps=con.prepareStatement(sql);
ps.setInt(1, start);
ps.setInt(2, end);
rs=ps.executeQuery();
List<UserVO> arr= makeList(rs);
return arr;
}finally {
close();
}
}ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
jQuery DOM 삭제
1) remove()함수
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#panel{
text-align: center;
}
#panel img{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>jQuery를 이용한 이미지 순환</h1>
<h2>append(), prepend()활용</h2>
<div id="panel">
<img src="images/3.jpg" width="200px" height="200px"></img>
<img src="images/4.jpg" width="200px" height="200px"></img>
<img src="images/6.jpg" width="200px" height="200px"></img>
<img src="images/sky.jpg" width="200px" height="200px"></img>
<img src="images/photo18.jpg" width="200px" height="200px"></img>
</div>
<div style="text-align: center; margin:10px; padding:10px;">
<button id="append">Append</button>
<button id="prepend">Prepend</button>
<button id="auto">Auto moving</button>
<button id="stop">Stop moving</button>
</div>
</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//append 누르면 img 요소 중 첫번째 요소를 찾아 #panel뒤에 붙인다.
$('#append').click(function(){
var item=$('#panel img:first');
$('#panel').append(item);
})
//prepend 누르면 img 요소 중 첫번째 요소를 찾아 #panel앞에 붙인다.
$('#prepend').click(function(){
var item=$('#panel img:last');
$('#panel').prepend(item);
})
//auto버튼 클릭하면 2초간격으로 이미지를 움직이기
w=null;
$('#auto').click(function(){
if(w==null){
w = setInterval(function(){
var item=$('#panel img').first();
$('#panel').append(item);
},2000)
}
})
//stop버튼 누르면 멈추기
$('#stop').click(function(){
if(w!=null){
clearInterval(w);
w=null;
}
})
})
</script>
</html>예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#panel{
text-align: center;
}
#panel img{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>jQuery를 이용한 이미지 순환</h1>
<h2>append(), prepend()활용</h2>
<div id="panel">
<img src="images/3.jpg" width="200px" height="200px"></img>
<img src="images/4.jpg" width="200px" height="200px"></img>
<img src="images/6.jpg" width="200px" height="200px"></img>
<img src="images/sky.jpg" width="200px" height="200px"></img>
<img src="images/photo18.jpg" width="200px" height="200px"></img>
</div>
<div style="text-align: center; margin:10px; padding:10px;">
<button id="append">Append</button>
<button id="prepend">Prepend</button>
<button id="auto">Auto moving</button>
<button id="stop">Stop moving</button>
</div>
</body>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
//append 누르면 img 요소 중 첫번째 요소를 찾아 #panel뒤에 붙인다.
$('#append').click(function(){
var item=$('#panel img:first');
$('#panel').append(item);
})
//prepend 누르면 img 요소 중 첫번째 요소를 찾아 #panel앞에 붙인다.
$('#prepend').click(function(){
var item=$('#panel img:last');
$('#panel').prepend(item);
})
//auto버튼 클릭하면 2초간격으로 이미지를 움직이기
w=null;
$('#auto').click(function(){
if(w==null){
w = setInterval(function(){
var item=$('#panel img').first();
$('#panel').append(item);
},2000)
}
})
//stop버튼 누르면 멈추기
$('#stop').click(function(){
clearInterval(w);
w=null;
})
})
</script>
</html>