페이징 코드좀 만들어주세요

조회수 246회

<%@ 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>&nbsp;";
         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 제목 내용 작성자 등록 취소 리스트

  • 챗GPT한테 만들어달라고 해보시죠! 😂 엽토군 2023.4.20 12:50

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)