API tools faq
paste
KuoHsiangYu

viewAllPicture.jsp

KuoHsiangYu
May 3rd, 2020
160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.60 KB | None | 0 0
raw download clone embed print report
  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <meta charset="UTF-8">
  7. <title>viewAllPicture</title>
  8. <style type="text/css">
  9. a {
  10.     color: blue;
  11. }
  12.  
  13. font {
  14.     /* 設定微軟正黑體 */
  15.     font-family: Microsoft JhengHei;
  16. }
  17.  
  18. .delete {
  19.     /* color: blue 藍色的文字看起來像超連結 */
  20.     color: blue;
  21.     /* cursor: pointer 滑鼠移到這個項目變成手指圖標。 */
  22.     cursor: pointer;
  23.     /*  text-decoration: underline 加上底線 */
  24.     text-decoration: underline;
  25. }
  26.  
  27. #outerDiv {
  28.     width: 100%;
  29. }
  30.  
  31. .fontVariableSize {
  32.     color: black;
  33.     text-align: left;
  34.     font-size: 18px;
  35. }
  36. </style>
  37. <script type="text/javascript" src="${pageContext.request.contextPath}/javascript/publicFunction.js"></script>
  38. <script type="text/javascript">
  39.    
  40. </script>
  41.  
  42. <!-- 設定 favicon.ico 圖示 -->
  43. <link rel="icon" href="favicon.ico" type="image/x-icon">
  44.  
  45. </head>
  46. <body>
  47.     <div id="outerDiv" align="center">
  48.         <h1>viewAllPicture</h1>
  49.         <br />
  50.         <button id="decreaseFontSize">
  51.             <font size="+2">縮小</font>
  52.         </button>
  53.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  54.         <button id="resetFontSize">
  55.             <font size="+2">重設大小</font>
  56.         </button>
  57.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  58.         <button id="increaseFontSize">
  59.             <font size="+2">放大</font>
  60.         </button>
  61.         <br />
  62.         <br />
  63.         <c:if test="${not empty pictureTableList}">
  64.             <!-- 如果 pictureTableList != null 或 userDataList物件不為空集合，代表 pictureTableList 裡面有資料，依依把 標題、圖片資料秀出來。 -->
  65.             <table border="1" width="70%">
  66.                 <tr align="center">
  67.                     <td>
  68.                         <font size="+2">編號</font>
  69.                     </td>
  70.                     <td>
  71.                         <font size="+2">標題</font>
  72.                     </td>
  73.                     <td>
  74.                         <font size="+2">圖</font>
  75.                     </td>
  76.                     <td>
  77.                         <font size="+2">編輯</font>
  78.                     </td>
  79.                     <td>
  80.                         <font size="+2">刪除</font>
  81.                     </td>
  82.                     <td>
  83.                         <font size="+2">下載</font>
  84.                     </td>
  85.                 </tr>
  86.                 <c:forEach var="picture" items="${pictureTableList}">
  87.                     <tr>
  88.                         <td>
  89.                             <font class="fontVariableSize">${picture.id}</font>
  90.                         </td>
  91.                         <td>
  92.                             <font class="fontVariableSize">${picture.title}</font>
  93.                         </td>
  94.                         <td width="400px">
  95.                             <img src="${pageContext.request.contextPath}/GetPicture?id=${picture.id}" width="400px" />
  96.                         </td>
  97.                         <td align="center">
  98.                             <a href="${pageContext.request.contextPath}/EditPicture?id=${picture.id}&pageNo=${pageNo}">
  99.                                 <font size="+2">編輯</font>
  100.                             </a>
  101.                         </td>
  102.                         <td align="center">
  103.                             <p class="delete" hrefName="${pageContext.request.contextPath}/DeletePicture?id=${picture.id}&pageNo=${pageNo}">
  104.                                 <font size="+2">刪除</font>
  105.                             </p>
  106.                         </td>
  107.                         <td align="center">
  108.                             <a href="${pageContext.request.contextPath}/GetPictureFile?id=${picture.id}">
  109.                                 <font size="+2">下載</font>
  110.                             </a>
  111.                         </td>
  112.                     </tr>
  113.                 </c:forEach>
  114.             </table>
  115.  
  116.             <br />
  117.  
  118.             <!-- 以下為控制 第一頁、前一頁、下一頁、最末頁 等超連結-->
  119.             <table border="1">
  120.                 <tr>
  121.                     <td width="90" align="center">
  122.                         <c:choose>
  123.                             <c:when test="${pageNo > 1}">
  124.                                 <font color="blue">
  125.                                     <a href="${pageContext.request.contextPath}/GetAllPicturePath?pageNo=1">第一頁</a>
  126.                                 </font>
  127.                             </c:when>
  128.                             <c:otherwise>
  129.                                 第一頁
  130.                             </c:otherwise>
  131.                         </c:choose>
  132.                     </td>
  133.                     <td width="90" align="center">
  134.                         <c:choose>
  135.                             <c:when test="${pageNo > 1}">
  136.                                 <font color="blue">
  137.                                     <a href="${pageContext.request.contextPath}/GetAllPicturePath?pageNo=${pageNo - 1}">上一頁</a>
  138.                                 </font>
  139.                             </c:when>
  140.                             <c:otherwise>
  141.                                 上一頁
  142.                             </c:otherwise>
  143.                         </c:choose>
  144.                     </td>
  145.                     <td width="110" align="center">
  146.                         <select id="pageId">
  147.                         </select>
  148.                     </td>
  149.                     <td width="90" align="center">
  150.                         <c:choose>
  151.                             <c:when test="${pageNo != totalPages}">
  152.                                 <font color="blue">
  153.                                     <a href="${pageContext.request.contextPath}/GetAllPicturePath?pageNo=${pageNo + 1}">下一頁</a>
  154.                                 </font>
  155.                             </c:when>
  156.                             <c:otherwise>
  157.                                 下一頁
  158.                             </c:otherwise>
  159.                         </c:choose>
  160.                     </td>
  161.                     <td width="90" align="center">
  162.                         <c:choose>
  163.                             <c:when test="${pageNo != totalPages}">
  164.                                 <font color="blue">
  165.                                     <a href="${pageContext.request.contextPath}/GetAllPicturePath?pageNo=${totalPages}">最末頁</a>
  166.                                 </font>
  167.                             </c:when>
  168.                             <c:otherwise>
  169.                                 最末頁
  170.                             </c:otherwise>
  171.                         </c:choose>
  172.                     </td>
  173.                     <td width="180" align="center">第 ${pageNo} 頁 / 共 ${totalPages} 頁</td>
  174.                 </tr>
  175.             </table>
  176.         </c:if>
  177.         <c:if test="${empty pictureTableList}">
  178.             <!-- 如果 pictureTableList 是 null 或 空集合 就執行這段程式 -->
  179.             <p>您目前沒上傳任何圖片。</p>
  180.         </c:if>
  181.         <br />
  182.         <a href="${pageContext.request.contextPath}/index.jsp">
  183.             <font size="+3" color="blue">回首頁</font>
  184.         </a>
  185.         <br />
  186.         <br />
  187.     </div>
  188.     <script type="text/javascript">
  189.         "use strict";
  190.  
  191.         // Javascript調整字體大小
  192.         // https://blog.xuite.net/jon6773/blog/29539743-Javascript%E8%AA%BF%E6%95%B4%E5%AD%97%E9%AB%94%E5%A4%A7%E5%B0%8F
  193.  
  194.         var pageIdObj = document.getElementById("pageId");
  195.         var totalPage = 1;
  196.         var xmlHttpObj = new XMLHttpRequest();
  197.         xmlHttpObj.onreadystatechange = function() {
  198.             // 使用AJAX取得總頁數資料
  199.             if (this.readyState == 4 && this.status == 200) {
  200.                 totalPage = Number.parseInt(this.responseText);
  201.                 var optionText = "";
  202.                 for (var i = 1; i <= totalPage; i++) {
  203.                     optionText = "第 " + i + " 頁";
  204.                     pageIdObj.add(new Option(optionText, i));
  205.                 }
  206.  
  207.                 var pageNo = "${pageNo}";// 取得現在第幾頁
  208.                 pageIdObj.value = pageNo;// 設定 focus 下拉選單在第幾頁
  209.             }
  210.         }
  211.         xmlHttpObj.open("get", "GetPictureTotalPage", true);// 第三個參數設定 true，代表開啟非同步模式。
  212.         xmlHttpObj.send();
  213.  
  214.         pageIdObj.addEventListener("change", function() {
  215.             // 當下拉式選單的值變化時，觸發此事件，跳轉到指定的頁面。
  216.             // console.log("pageIdObj.addEventListener");
  217.             // console.log("pageIdObj.value = " + pageIdObj.value);
  218.             var jumpHref = "${pageContext.request.contextPath}/GetAllPicturePath?pageNo=" + pageIdObj.value;
  219.             window.location.href = jumpHref;// 跳轉到指定的頁面。
  220.         });
  221.  
  222.         // 以「delete class」名稱來抓取 元素。
  223.         var delHrefColl = document.getElementsByClassName("delete");
  224.         var length = delHrefColl.length;
  225.         for (var i = 0; i < length; i++) {
  226.             delHrefColl[i].addEventListener("click", function() {
  227.                 // 彈出確認視窗，詢問使用者是否確定要刪除？
  228.                 var isConfirm = confirm("你確定要刪除嗎？");
  229.                 if (false === isConfirm) {
  230.                     // do nothing
  231.                 } else {
  232.                     // 使用者按下「確定」就發送get請求，
  233.                     // 呼叫後端Servlet執行刪除資料的程式。
  234.                     var hrefName = this.getAttribute("hrefName");
  235.                     window.location.href = hrefName;
  236.                 }
  237.             });
  238.         }
  239.  
  240.         var fontVarSizeColl = document.getElementsByClassName("fontVariableSize");
  241.         var fontCollLength = fontVarSizeColl.length;
  242.         function initialFontSize() {
  243.             for (var i = 0; i < fontCollLength; i++) {
  244.                 // 替每個顯示文字設置大小初始值。
  245.                 fontVarSizeColl[i].style.fontSize = "18px";
  246.             }
  247.         }
  248.  
  249.         // 重設字型大小
  250.         var resetFontObj = document.getElementById("resetFontSize");
  251.         resetFontObj.addEventListener("click", function() {
  252.             initialFontSize();
  253.         });
  254.  
  255.         // 縮小字型
  256.         var decreaseSizeObj = document.getElementById("decreaseFontSize");
  257.         decreaseSizeObj.addEventListener("click", function() {
  258.             if (fontVarSizeColl[0].style.fontSize === "") {
  259.                 fontVarSizeColl[0].style.fontSize = "18px";
  260.             }
  261.             var tempSize = Number.parseInt(fontVarSizeColl[0].style.fontSize.replace("px", ""));
  262.             tempSize = tempSize - 1;
  263.             for (var i = 0; i < fontCollLength; i++) {
  264.                 fontVarSizeColl[i].style.fontSize = tempSize + "px";
  265.             }
  266.         });
  267.  
  268.         // 放大字型
  269.         var increaseSizeObj = document.getElementById("increaseFontSize");
  270.         increaseSizeObj.addEventListener("click", function() {
  271.             if (fontVarSizeColl[0].style.fontSize === "") {
  272.                 fontVarSizeColl[0].style.fontSize = "18px";
  273.             }
  274.             var tempSize = Number.parseInt(fontVarSizeColl[0].style.fontSize.replace("px", ""));
  275.             tempSize = tempSize + 1;
  276.             for (var i = 0; i < fontCollLength; i++) {
  277.                 fontVarSizeColl[i].style.fontSize = tempSize + "px";
  278.             }
  279.         });
  280.     </script>
  281. </body>
  282. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!