ajax를 활용한 간단한 더보기 페이징 구현입니다.
Mysql에서 제공하는 샘플 DB를 활용해서 영화목록 리스트를 만들어봤습니다.
VO를 따로 만들지 않고 service와 controller만으로 구현 했으며,
쿼리에 Limit 를 써서 10개씩만 보여주게끔 만들었습니다.
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div>
<table id="addList" border="1">
<thead>
<tr>
<th>No</th>
<th>제 목</th>
<th>내 용</th>
</tr>
</thead>
<tbody id="listBody">
</tbody>
</table>
</div>
<button id="addBtn" onclick="moreList();"><span>더보기</span></button>
</body>
</html>
<script>
moreList(); //함수 호출
function moreList() {
var startNum = $("#listBody tr").length; //마지막 리스트 번호를 알아내기 위해서 tr태그의 length를 구함.
var addListHtml = "";
console.log("startNum", startNum); //콘솔로그로 startNum에 값이 들어오는지 확인
$.ajax({
url : "/study/getfilmList",
type : "post",
dataType : "json",
data : {"startNum":startNum},
success : function(data) {
if(data.length < 10){
$("#addBtn").remove(); // 더보기 버튼을 div 클래스로 줘야 할 수도 있음
}else{
var addListHtml ="";
if(data.length > 0){
for(var i=0; i<data.length;i++) {
var idx = Number(startNum)+Number(i)+1;
// 글번호 : startNum 이 10단위로 증가되기 때문에 startNum +i (+1은 i는 0부터 시작하므로 )
addListHtml += "<tr>";
addListHtml += "<td>"+ idx + "</td>";
addListHtml += "<td>"+ data[i].title + "</td>";
addListHtml += "<td>"+ data[i].description + "</td>";
addListHtml += "</tr>";
}
$("#listBody").append(addListHtml);
}
}
}
});
}
</script>
|
<<< Service>>>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<<< Controller >>>
|
1
2
3
4
5
6
7
8
9
10
|
@Controller
public class StudyController {
//영화리스트
@RequestMapping("filmList")
public String filmList(Model model) throws Exception {
return "/study/filmList";
}
}
r
|
'javascript, JQuery' 카테고리의 다른 글
| [javascript] 배열 값 중복제거, 배열합치기 (0) | 2020.07.06 |
|---|---|
| [Jquery] 데이터 포맷(날짜에 하이픈 넣기) (0) | 2020.04.27 |
| [Jquery] anypicker (0) | 2020.04.13 |
| 제이쿼리 아코디언 _ Jquery Accodion (컨텐츠 펼침/접힘) (0) | 2020.04.13 |
| JSON 객체변환(파싱) , Cilck 이벤트 (0) | 2020.02.28 |