지식인에 답변 달았던것보다 디테일을 조금 추가했다.

 

 

1. JSP

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page import="java.util.Locale" %>
<%@ page import="java.sql.*" %>
<%@ page import="javax.sql.*" %>
<%@ page import="javax.naming.*" %>
<%
  SimpleDateFormat mSDF = new SimpleDateFormat("yyyy", Locale.KOREA);
  Date dDate = new Date();
  String nowYear = mSDF.format(dDate);

  String year1 = request.getParameter("yeh");
  // System.out.println("now : " + nowYear + " / year1 : " + year1);
  
  if(year1 == null){
    year1 = nowYear;
  }
 

  /*  // DB 처리를 위한 초기화.
  Connection conn = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;

  */
  
  /* // 디비에 연결할 때 본인의 설정에 맞게 수정.
  String sql = "select num, subject, ldate from 테이블명 where 날짜컬럼 = ?";
  
  try{
    Class.forName("oracle.jdbc.driver.OracleDriver");
    String oraUrl = "jdbc:oracle:thin:@localhost:1521:ORCL";
    conn = DriverManager.getConnection(oraUrl, "jsp", "jsp");
    oraUrl="";
  
    pstmt=conn.prepareStatement(sql);
    pstmt.setString(1, year1);
  */
%>

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>

  <script type="text/javascript">
    var date = new Date();
    var yeCal = date.getFullYear();
  </script>
</head>

<body>
  <form id="yeList" name="yeList" method="post" action="t001.jsp"> <!-- 파일명 -->
    <input type="hidden" id="yeh" name="yeh" value="<%=year1 %>" />

    <table width=400 >
      <tr>
        <th colspan=3>
          <a href="#" onclick="moveYear('l')"> << </a>
          <label id="ye" name="ye"></label>
          <a href="#" onclick="moveYear('r')"> >> </a>
        </th>
      </tr>
    </table>

    <table width=400 border=1>
      <tr>
        <th width=12%>번 호</th><th width=65%>제 목</th><th>날 짜</th>
      </tr>
<%
/*  // 디비에 연결할 때 본인의 설정에 맞게 수정.
    while(rs.next()){
      String num = rs.getString("num");    // 번호
      String subj = rs.getString("subject"); // 제목
      String ldata = rs.getString("ldate");   // 날짜
*/
  // 테스트용.

  String num = "1";  // 번호
  String subj = year1 + " 데이터 리스트"; // 제목
  String ldata = year1 + "-07-07"; // 날짜
  
%>
      <tr>
        <td width=12% align="left"> <%=num %></td>
        <td width=65%><%=subj %></td>
        <td><%=ldata %></td>
      </tr>
<%
//  }  // 디비에 연결할 때 주석 해제.
%>
    </table>
  </form>
  
  <script type="text/javascript">

    // ajax로 만들면 편하겠지만.. 지식인 답변용이라서 자바스크립트로 만듬.
    var yeh = document.getElementById("yeh").value;
  
    if(yeCal == yeh){
      document.getElementById("ye").innerHTML = yeCal;
    }else{
      if(Number(yeh) < yeCal - 10){ // 10년 이전을 클릭하면 마지막 출력 연도까지만 표시.
        document.getElementById("ye").innerHTML = yeh;
      }else if(Number(yeh) <= yeCal && Number(yeh) >= yeCal - 10){

      // 본래는 DB에서 리스트 여부를 확인해야 하지만 귀찮아서 10년전 까지만 표시.
        document.getElementById("ye").innerHTML = <%=year1%>;
      }else{
        document.getElementById("ye").innerHTML = yeCal; // 올해가 넘어가면 올해까지만 표시.
      }
    }
 
    function moveYear(a){
      if(a == "l" && (yeCal - 10) <= Number(yeh)){
        yeCal = Number(yeh) - 1;
      }else if(a == "r" && yeCal > Number(yeh)){
        yeCal = Number(yeh) + 1;
      }else{
        alert("게시물은 없습니다.");
        return;
      }
      document.yeList.yeh.value = yeCal;
      document.yeList.submit();
    }  

  </script>
<%
  /*  // 디비에 연결할 때 본인의 설정에 맞게 수정.
  }catch(SQLException e){
    e.printStackTrace();
  }finally{
    rs.close();
    pstmt.close();
    conn.close();
  }
 */

%>
</body>
</html>

 

 

2. RUN

 

 

 

 

여전히 조잡하네.. 너무 대충 만들었나..

 

지식인 답변 링크 : http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=255891799&page=1#answer1