페이징 코드좀 만들어주세요
조회수 126회
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
" var="ContextPath"/>
<!DOCTYPE html>
Spring MVC02
$(document).ready(function(){
loadList();
});
function loadList(){
// 서버와 통신 : 게시판 리스트 가져오기
$.ajax({
url : "${ContextPath}/notice",
type : "get",
// data: { "pageNum": pageNum }, // 페이지 번호 전달
dataType : "json",
success : makeView,
error : function(){ alert("error"); }
});
}
// 0 1 2 ---->
function makeView(data,pageNum, totalPage){ // data=[{ },{ },{ },,, ]
var listHtml="";
listHtml+="";
listHtml+="번호";
listHtml+="제목";
listHtml+="작성자";
listHtml+="작성일";
listHtml+="조회수";
listHtml+="";
$.each(data, function(no,obj){ // obj={"idx":5,"title":"게시판"~~ }
listHtml+="";
listHtml+=""+obj.no+"";
listHtml += "" + obj.title + "";
listHtml+=""+obj.writername+"";
listHtml+=""+obj.regdate.split(' ')[0]+"";
listHtml+=""+obj.readcnt+"";
listHtml+="";
listHtml+="<tr id='c"+obj.no+"' style='display:none'>";
listHtml+="<td>내용</td>";
listHtml+="<td colspan='4'>";
listHtml+="<textarea id='ta"+obj.no+"' readonly rows='7' class='form-control'></textarea>";
listHtml+="<br/>";
listHtml+="<span id='ub"+obj.no+"'><button class='btn btn-success btn-sm' onclick='updateNoticeForm("+obj.no+")'>수정화면</button></span> ";
listHtml+="<button class='btn btn-warning btn-sm' onclick='deleteNotice("+obj.no+")'>삭제</button>";
listHtml+="</td>";
listHtml+="</tr>";
} );
listHtml+="<tr>";
listHtml+="<td colspan='5'>";
listHtml+="<button class='btn btn-primary btn-sm' onclick='goForm()'>글쓰기</button>";
listHtml+="</td>";
listHtml+="</tr>";
listHtml+="</table>";
$("#view").html(listHtml);
$("#view").css("display","block"); // 감추고
$("#wfrom").css("display","none");// 보이고
}
function goForm(){
$("#view").css("display","none"); // 감추고
$("#wfrom").css("display","block");// 보이고
}
function getNoticeList(){
$("#view").css("display","block"); // 감추고
$("#wfrom").css("display","none");// 보이고
}
function inserNotice(){
// 유효성 검사
if (!$("#title").val()) {
alert("제목을 입력해주세요.");
return;
}
if (!$("#content").val()) {
alert("내용을 입력해주세요.");
return;
}
if (!$("#writername").val()) {
alert("작성자를 입력해주세요.");
return;
}
//var title=$("#title").val();
//var content=$("#content").val();
//var writer=$("#writer").val();
var fData=$("#frm").serialize();
//alert(fData);
$.ajax({
url : "${ContextPath}/notice/insert",
type : "post",
data : fData,
success : loadList,
error : function() { alert("error"); }
});
// 폼 초기화
//$("#title").val("");
//$("#content").val("");
//$("#writer").val("");
$("#fclear").trigger("click");
}
//상세보기
function hideDetailNoticeCallback(no, title) {
$("#t" + no).html("<a href='javascript:getDetailNotice(" + no + ", \"" + title + "\", showDetailNoticeCallback)'>" + title + "</a>");
$("#cnt" + no).text(Number($("#cnt" + no).text()) + 1);
}
function showDetailNoticeCallback(no, title) {
$("#ta" + no).val("");
$("#c" + no).css("display", "none");
$("#t" + no).html("<a href='javascript:getDetailNotice(" + no + ", \"" + title + "\", hideDetailNoticeCallback)'>" + title + "</a>");
}
function getDetailNotice(no, title, callback) {
if ($("#c" + no).css("display") == "none") {
$.ajax({
url: "${ContextPath}/read/" + no,
type: "get",
success: function (data) {
$("#ta" + no).val(data.content);
},
error: function () {
alert("error");
}
});
$("#c" + no).css("display", "table-row");
$("#ta" + no).attr("readonly", true);
if (typeof callback === "function") {
callback(no, title);
}
} else {
$("#c" + no).css("display", "none");
$.ajax({
url: "${ContextPath}/read/" + no,
type: "POST",
data: { "no": no },
headers: { "X-HTTP-Method-Override": "PUT" },
dataType: "json",
success: function (data) {
$("#cnt" + no).text(data.count);
if (typeof callback === "function") {
callback(no, title);
}
},
/* error: function () {
alert("error");
} */
});
}
}
function deleteNotice(no){
$.ajax({
url : "${ContextPath}/delete/"+no,
type : "delete",
success : loadList,
error : function(){ alert("error"); }
});
}
function updateNoticeForm(no){ //idx=10, 7, 8
$("#ta"+no).attr("readonly",false); // 1
var title=$("#t"+no).text();
var newInput="<input type='text' id='nt"+no+"' class='form-control' value='"+title+"'/>";
$("#t"+no).html(newInput); // 2
var newButton="<button class='btn btn-primary btn-sm' onclick='updateNotice("+no+")'>수정</button>";
$("#ub"+no).html(newButton); // 3
}
function updateNotice(no){
var title=$("#nt"+no).val();
var content=$("#ta"+no).val();
$.ajax({
url : "${ContextPath}/updateForm/" + no,
type : "put",
contentType:'application/json;charset=utf-8',
data : JSON.stringify({"no":no,"title":title,"content":content}),
success : loadList,
error : function(){ alert("error"); }
});
}
공지사항 BOARD 제목 내용 작성자 등록 취소 리스트
댓글 입력