[AJAX + SPA게시판 클라이언트단 만들기]
1. 기본 페이지
** index.html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/CSS/common.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="${pageContext.request.contextPath }/JS/board.js"></script>
<title>SPA 게시판</title>
</head>
<body>
<h2>게시판 - SPA</h2>
<%-- 글목록 --%>
<div id="list">
<div>
<div id="pageinfo"></div>
<div id="pageRows"></div>
</div>
<div class="clear"></div>
<table>
<thead>
<th>#</th>
<th>UID</th>
<th>제목</th>
<th>작성자</th>
<th>조회수</th>
<th>작성일</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<br>
<%-- 페이징 --%>
<div class="center">
<ul class="pagination" id="pagination">
</ul>
</div>
</body>
</html>
2. 스타일링
** CSS > common.css
@charset "UTF-8";
#list table {width: 100%;}
#list table, #list th, #list td {
border: 1px solid black;
border-collapse: collapse;
}
.clear { clear: both; }
.center {
text-align: center;
}
ul.pagination{
list-style-type:none
}
ul.pagination li{
display: inline-block;
}
ul.pagination a {
color: black;
float: left;
padding: 4px 8px;
text-decoration: none;
transition: background-color .3s;
/* border: 1px solid #ddd; */
/* margin: 0 4px; */
margin: 0px;
}
ul.pagination a.active {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}
ul.pagination a:hover:not(.active) {background-color: #ddd;}
#pageinfo {
float: left;
}
#pageRows {
float: right;
}
3. 동작
** board.js
var page = 1 // 현재 페이지
var pageRows = 10 // 한 페이지에 보여지는 게시글 개수
$(document).ready(function(){
// 게시판 목록 1페이지 로딩
loadPage(page);
});
// page 번째 페이지 로딩
function loadPage(page){
$.ajax({
url : "list.ajax?page=" + page + "&pageRows=" + pageRows
, type : "GET"
, cache : false
, success : function(data, status){
if(status == "success"){
//alert("AJAX 성공: 받아쮸~");
updateList(data);
}
}
});
} // end loadPage()
//
function updateList(jsonObj){
result = "";
if(jsonObj.status == "OK"){
var count = jsonObj.count;
// 전역변수 업데이트!
window.page = jsonObj.page;
window.pageRows = jsonObj.pagerows;
var i;
var items = jsonObj.data; // 배열
for(i = 0; i < count; i++){
result += "<tr>\n";
result += "<td>" + "</td>\n";
result += "<td>" + items[i].uid + "</td>\n";
result += "<td>" + items[i].subject + "</td>\n";
result += "<td>" + items[i].name + "</td>\n";
result += "<td>" + items[i].viewcnt + "</td>\n";
result += "<td>" + items[i].regdate + "</td>\n";
result += "</tr>\n";
} // end for
$("#list tbody").html(result); // 테이블 업데이트!
// 페이지 정보 업데이트
$("#pageinfo").text(jsonObj.page + "/" + jsonObj.totalpage + "페이지, " + jsonObj.totalcnt + "개의 글");
// pageRows
var txt = "<select id='rows'>\n";
txt += "<option " + ((window.pageRows == 10)?"selected":"") + ">10개씩</option>\n";
txt += "<option " + ((window.pageRows == 20)?"selected":"") + ">20개씩</option>\n";
txt += "<option " + ((window.pageRows == 50)?"selected":"") + ">50개씩</option>\n";
txt += "<option " + ((window.pageRows == 100)?"selected":"") + ">100개씩</option>\n";
txt += "</select>\n";
$("#pageRows").html(txt);
// 페이징 업데이트
var pagination = buildPagination(jsonObj.writepages, jsonObj.totalpage, jsonObj.page, jsonObj.pagerows);
$("#pagination").html(pagination);
return true;
} else {
alert(jsonObj.message);
return false;
}
return false;
} // end updateList()
function buildPagination(writePages, totalPage, curPage, pageRows){
var str = ""; // 최종적으로 페이징에 나타날 HTML 문자열 <li> 태그로 구성
// 페이징에 보여질 숫자들 (시작숫자 start_page ~ 끝숫자 end_page)
var start_page = ( (parseInt( (curPage - 1 ) / writePages ) ) * writePages ) + 1;
var end_page = start_page + writePages - 1;
if (end_page >= totalPage){
end_page = totalPage;
}
//■ << 표시 여부
if(curPage > 1){
str += "<li><a onclick='loadPage(1)' class='tooltip-top' title='처음'><i class='fas fa-angle-double-left'></i></a></li>\n";
}
//■ < 표시 여부
if (start_page > 1)
str += "<li><a onclick='loadPage(" + (start_page -1) + ")' class='tooltip-top' title='이전'><i class='fas fa-angle-left'></i></a></li>\n";
//■ 페이징 안의 '숫자' 표시
if (totalPage > 1) {
for (var k = start_page; k <= end_page; k++) {
if (curPage != k)
str += "<li><a onclick='loadPage(" + k + ")'>" + k + "</a></li>\n";
else
str += "<li><a class='active tooltip-top' title='현재페이지'>" + k + "</a></li>\n";
}
}
//■ > 표시
if (totalPage > end_page){
str += "<li><a onclick='loadPage("+ (end_page + 1 ) + ")' class='tooltip-top' title='다음'><i class='fas fa-angle-right'></i></a></li>\n";
}
//■ >> 표시
if (curPage < totalPage) {
str += "<li><a onclick='(" + totalPage + ")' class='tooltip-top' title='맨끝'><i class='fas fa-angle-double-right'></i></a></li>\n";
}
return str;
} // end buildPagination()'웹_프론트_백엔드 > JAVA프레임윅기반_풀스택' 카테고리의 다른 글
| JSP Team Project(2020.05.25 ~ 2020.06.15) (0) | 2020.06.16 |
|---|---|
| 2020.06.10 (0) | 2020.06.10 |
| 2020.06.08 (0) | 2020.06.08 |
| 2020.06.05 (0) | 2020.06.05 |
| 2020.06.03 (0) | 2020.06.03 |