2017-08-02 54 views
1

我是新來的java,並試圖將HTML/CSS和Javascript嵌入到java代碼中。 任何指針將有助於完成構建我的代碼。我使用Eclipse編輯器編寫我的Java代碼。在使用IDE的java代碼中使用HTML,CSS和Javascript Eclipse

我已經能夠在我的java代碼中成功顯示HTML顯示的一些部分,但我試圖通過html/css/javascript實現表格排序,並且希望將其添加到我的java代碼中。

下面是我的display.java文件

  public void transformForRequestSuccessful(MarkupOutput out) { 
      //Call render methods 
     renderdisplay(out); 
         } 
    public void renderdisplay(MarkupOutput out) 
      { 
      out.append("<BR/>"); 
      out.append("<p>Look at the body!</p>"); 

      out.append("<BR/>"); 
      } 

下面是HTML/CSS/JavaScript代碼可以被粘貼的值並運行良好。

我把這個HTML文件保存爲sort.html,獨立調用的時候工作正常。

html> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=Windows-1252"> 
<script type="text/javascript"> 
    var people, asc1 = 1, 
     asc2 = 1, 
     asc3 = 1; 
    window.onload = function() { 
     people = document.getElementById("people"); 
    } 

    function sort_table(tbody, col, asc) { 
     var rows = tbody.rows, 
      rlen = rows.length, 
      arr = new Array(), 
      i, j, cells, clen; 
     // fill the array with values from the table 
     for (i = 0; i < rlen; i++) { 
      cells = rows[i].cells; 
      clen = cells.length; 
      arr[i] = new Array(); 
      for (j = 0; j < clen; j++) { 
       arr[i][j] = cells[j].innerHTML; 
      } 
     } 
     // sort the array by the specified column number (col) and order 
    (asc) 
     arr.sort(function (a, b) { 
      return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 * 
    asc); 
     }); 
     // replace existing rows with new rows created from the sorted array 
     for (i = 0; i < rlen; i++) { 
      rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>"; 
     } 
    } 
    </script> 
    <style type="text/css"> 
    table { 
     border-collapse: collapse; 
     border: none; 
    } 
    th, 
    td { 
     border: 1px solid black; 
     padding: 4px 16px; 
     font-family: Times New Roman; 
     font-size: 15px; 
     text-align: left; 
    } 
    th { 
     background-color: #C8C8C8; 
     cursor: pointer; 
    } 
    </style> 
    </head> 

    <body> 
<table> 
    <thead> 
     <tr> 
      <th onclick="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; 
    asc3 = 1;">ServerName</th> 
      <th onclick="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; 
    asc1 = 1;">UserName</th> 
      <th onclick="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; 
    asc2 = 1;">JobId</th> 
     </tr> 
    </thead> 
    <tbody id="people"> 
     <tr> 
      <td>Server1</td> 
      <td>ABC</td> 
      <td>18</td> 
     </tr> 
     <tr> 
      <td>Server2</td> 
      <td>XYZ</td> 
      <td>20</td> 
     </tr> 
     </tbody> 
    </table> 
    </body> 

    </html> 

任何幫助或建議如何將其嵌入到java代碼將是有益的。 我很抱歉,如果我聽起來天真或不知道基本的Java編程。

感謝

回答

0

爲了避免需要集成OWASP編碼器來編碼JS或CSS數據的特殊字符。請參考此link

0

雖然它不會單獨工作,而是希望這將幫助你瞭解執行。這是一個示例JSP文件。在JSP文件中,您可以以標記(scriplet,declarative和expression)的形式嵌入java代碼。

<!DOCTYPE html> 
<%@page import="com.demo.dto.RegisterDTO"%> 
<%@page import="java.util.ArrayList"%> 
<%@page import="com.model.Student"%> 
<%@page import="java.util.List"%> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Bootsrtap Free Admin Template - SIMINTA | Admin Dashboad Template</title> 
    <!-- Core CSS - Include with every page --> 
    <link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" /> 
    <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" /> 
    <link href="assets/plugins/pace/pace-theme-big-counter.css" rel="stylesheet" /> 
    <link href="assets/css/style.css" rel="stylesheet" /> 
     <link href="assets/css/main-style.css" rel="stylesheet" /> 

    <!-- Page-Level CSS --> 
    <link href="assets/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" /> 
    <%List<RegisterDTO> entity = (List<RegisterDTO>)(request.getAttribute("entity")); %> 

</head> 

<body> 
    <!-- wrapper --> 
    <div id="wrapper"> 
     <!-- navbar top --> 
     <nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar"> 
      <!-- navbar-header --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.html"> 
        <img src="assets/img/logo.png" alt="" /> 
       </a> 
      </div> 
      <!-- end navbar-header --> 
      <!-- navbar-top-links --> 
      <ul class="nav navbar-top-links navbar-right"> 
       <!-- main dropdown --> 
       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <span class="top-label label label-danger">3</span><i class="fa fa-envelope fa-3x"></i> 
        </a> 
        <!-- dropdown-messages --> 
        <ul class="dropdown-menu dropdown-messages"> 
         <li> 
          <a href="#"> 
           <div> 
            <strong><span class=" label label-danger">Andrew Smith</span></strong> 
            <span class="pull-right text-muted"> 
             <em>Yesterday</em> 
            </span> 
           </div> 
           <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <strong><span class=" label label-info">Jonney Depp</span></strong> 
            <span class="pull-right text-muted"> 
             <em>Yesterday</em> 
            </span> 
           </div> 
           <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <strong><span class=" label label-success">Jonney Depp</span></strong> 
            <span class="pull-right text-muted"> 
             <em>Yesterday</em> 
            </span> 
           </div> 
           <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>Read All Messages</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- end dropdown-messages --> 
       </li> 

       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <span class="top-label label label-success">4</span> <i class="fa fa-tasks fa-3x"></i> 
        </a> 
        <!-- dropdown tasks --> 
        <ul class="dropdown-menu dropdown-tasks"> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 1</strong> 
             <span class="pull-right text-muted">40% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> 
              <span class="sr-only">40% Complete (success)</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 2</strong> 
             <span class="pull-right text-muted">20% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> 
              <span class="sr-only">20% Complete</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 3</strong> 
             <span class="pull-right text-muted">60% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> 
              <span class="sr-only">60% Complete (warning)</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <p> 
             <strong>Task 4</strong> 
             <span class="pull-right text-muted">80% Complete</span> 
            </p> 
            <div class="progress progress-striped active"> 
             <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> 
              <span class="sr-only">80% Complete (danger)</span> 
             </div> 
            </div> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>See All Tasks</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- end dropdown-tasks --> 
       </li> 

       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <span class="top-label label label-warning">5</span> <i class="fa fa-bell fa-3x"></i> 
        </a> 
        <!-- dropdown alerts--> 
        <ul class="dropdown-menu dropdown-alerts"> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-comment fa-fw"></i>New Comment 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-twitter fa-fw"></i>3 New Followers 
            <span class="pull-right text-muted small">12 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-envelope fa-fw"></i>Message Sent 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-tasks fa-fw"></i>New Task 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a href="#"> 
           <div> 
            <i class="fa fa-upload fa-fw"></i>Server Rebooted 
            <span class="pull-right text-muted small">4 minutes ago</span> 
           </div> 
          </a> 
         </li> 
         <li class="divider"></li> 
         <li> 
          <a class="text-center" href="#"> 
           <strong>See All Alerts</strong> 
           <i class="fa fa-angle-right"></i> 
          </a> 
         </li> 
        </ul> 
        <!-- end dropdown-alerts --> 
       </li> 

       <li class="dropdown"> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
         <i class="fa fa-user fa-3x"></i> 
        </a> 
        <!-- dropdown user--> 
        <ul class="dropdown-menu dropdown-user"> 
         <li><a href="#"><i class="fa fa-user fa-fw"></i>User Profile</a> 
         </li> 
         <li><a href="#"><i class="fa fa-gear fa-fw"></i>Settings</a> 
         </li> 
         <li class="divider"></li> 
         <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i>Logout</a> 
         </li> 
        </ul> 
        <!-- end dropdown-user --> 
       </li> 
       <!-- end main dropdown --> 
      </ul> 
      <!-- end navbar-top-links --> 

     </nav> 
     <!-- end navbar top --> 

     <!-- navbar side --> 
     <nav class="navbar-default navbar-static-side" role="navigation"> 
      <!-- sidebar-collapse --> 
      <div class="sidebar-collapse"> 
       <!-- side-menu --> 
       <ul class="nav" id="side-menu"> 
        <li> 
         <!-- user image section--> 
         <div class="user-section"> 
          <div class="user-section-inner"> 
           <img src="assets/img/user.jpg" alt=""> 
          </div> 
          <div class="user-info"> 
           <div>Jonny <strong>Deen</strong></div> 
           <div class="user-text-online"> 
            <span class="user-circle-online btn btn-success btn-circle "></span>&nbsp;Online 
           </div> 
          </div> 
         </div> 
         <!--end user image section--> 
        </li> 
        <li class="sidebar-search"> 
         <!-- search section--> 
         <div class="input-group custom-search-form"> 
          <input type="text" class="form-control" placeholder="Search..."> 
          <span class="input-group-btn"> 
           <button class="btn btn-default" type="button"> 
            <i class="fa fa-search"></i> 
           </button> 
          </span> 
         </div> 
         <!--end search section--> 
        </li> 
        <li> 
         <a href="index.html"><i class="fa fa-dashboard fa-fw"></i>Dashboard</a> 
        </li> 
        <li class="selected"> 
         <a href="User.jsp"><i class="fa fa-dashboard fa-fw"></i>Manage Users</a> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-bar-chart-o fa-fw"></i>Charts<span class="fa arrow"></span></a> 
         <ul class="nav nav-second-level"> 
          <li> 
           <a href="flot.html">Flot Charts</a> 
          </li> 
          <li> 
           <a href="morris.html">Morris Charts</a> 
          </li> 
         </ul> 
         <!-- second-level-items --> 
        </li> 
        <li> 
         <a href="timeline.html"><i class="fa fa-flask fa-fw"></i>Timeline</a> 
        </li> 
        <li class="selected"> 
         <a href="tables.html"><i class="fa fa-table fa-fw"></i>Tables</a> 
        </li> 
        <li> 
         <a href="forms.html"><i class="fa fa-edit fa-fw"></i>Forms</a> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-wrench fa-fw"></i>UI Elements<span class="fa arrow"></span></a> 
         <ul class="nav nav-second-level"> 
          <li> 
           <a href="panels-wells.html">Panels and Wells</a> 
          </li> 
          <li> 
           <a href="buttons.html">Buttons</a> 
          </li> 
          <li> 
           <a href="notifications.html">Notifications</a> 
          </li> 
          <li> 
           <a href="typography.html">Typography</a> 
          </li> 
          <li> 
           <a href="grid.html">Grid</a> 
          </li> 
         </ul> 
         <!-- second-level-items --> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-sitemap fa-fw"></i>Multi-Level Dropdown<span class="fa arrow"></span></a> 
         <ul class="nav nav-second-level"> 
          <li> 
           <a href="#">Second Level Item</a> 
          </li> 
          <li> 
           <a href="#">Second Level Item</a> 
          </li> 
          <li> 
           <a href="#">Third Level <span class="fa arrow"></span></a> 
           <ul class="nav nav-third-level"> 
            <li> 
             <a href="#">Third Level Item</a> 
            </li> 
            <li> 
             <a href="#">Third Level Item</a> 
            </li> 
            <li> 
             <a href="#">Third Level Item</a> 
            </li> 
            <li> 
             <a href="#">Third Level Item</a> 
            </li> 
           </ul> 
           <!-- third-level-items --> 
          </li> 
         </ul> 
         <!-- second-level-items --> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-files-o fa-fw"></i>Sample Pages<span class="fa arrow"></span></a> 
         <ul class="nav nav-second-level"> 
          <li> 
           <a href="blank.html">Blank Page</a> 
          </li> 
          <li> 
           <a href="login.html">Login Page</a> 
          </li> 
         </ul> 
         <!-- second-level-items --> 
        </li> 
       </ul> 
       <!-- end side-menu --> 
      </div> 
      <!-- end sidebar-collapse --> 
     </nav> 
     <!-- end navbar side --> 
     <!-- page-wrapper --> 
     <div id="page-wrapper"> 


      <div class="row"> 
       <!-- page header --> 
       <div class="col-lg-12"> 
        <h1 class="page-header">Tables</h1> 
       </div> 
       <!-- end page header --> 
      </div> 

      <div class="row"> 
      <form method="post" action="MyServlet"> 
      <input type="hidden" value=1 name="userAction"/> 
      <input type="submit" name="showData" value="showData"/> 
      </form> 
      </div> 

      <div class="row"> 
       <div class="col-lg-12"> 
        <!-- Kitchen Sink --> 
        <div class="panel panel-default"> 
         <div class="panel-heading"> 
          User Details 
         </div> 
         <div class="panel-body"> 
          <div class="table-responsive"> 
           <table class="table table-striped table-bordered table-hover" id="dataTables-example"> 
            <thead> 
             <tr> 
              <th>ID</th> 
              <th>First Name</th> 
              <th>Last Name</th> 
              <th>Contact</th> 
              <th>Email</th> 
             </tr> 
            </thead> 
            <tbody> 
            <% if(entity != null){ 
            for(RegisterDTO data:entity){ %> 
             <tr> 
              <td><%=data.getId() %></td> 
              <td><%=data.getFirstName() %></td> 
               <td><%=data.getLastName() %></td> 
               <td><%=data.getContact() %></td> 
               <td><%=data.getEmail() %></td> 
             </tr> 
             <% } 
             }%> 

            </tbody> 
           </table> 
          </div> 
         </div> 
        </div> 
        <!-- End Kitchen Sink --> 
       </div> 

      </div> 

    </div> 
    <!-- end wrapper --> 

    <!-- Core Scripts - Include with every page --> 
    <script src="assets/plugins/jquery-1.10.2.js"></script> 
    <script src="assets/plugins/bootstrap/bootstrap.min.js"></script> 
    <script src="assets/plugins/metisMenu/jquery.metisMenu.js"></script> 
    <script src="assets/plugins/pace/pace.js"></script> 
    <script src="assets/scripts/siminta.js"></script> 
    <!-- Page-Level Plugin Scripts--> 
    <script src="assets/plugins/dataTables/jquery.dataTables.js"></script> 
    <script src="assets/plugins/dataTables/dataTables.bootstrap.js"></script> 
    <script> 
     $(document).ready(function() { 
      $('#dataTables-example').dataTable(); 
     }); 
    </script> 

</body> 

</html> 

在此,我也用scriplet標籤做了一個動態表。

+0

謝謝您的意見。我正在使用asp.net。你可以請示例爲ASP示例? – user3438791

+0

但你要求提供java代碼。你怎麼能在asp.net中嵌入java代碼?請澄清你的問題 –

+0

我的意思是我使用IIS作爲我的網絡服務器。我試圖實現的是類似於這篇文章https://stackoverflow.com/questions/15842683/string-builder-int-html-table-format但我無法esc在我的CSS和JS中使用的特殊字符。所以需要幫助。 – user3438791

0

如果你是新手,你將被曝光以許多不同的方法來完成同樣的事情 - 如何讓您的Java代碼與其他Web技術一起工作。國際海事組織,Spring Boot是最快捷的入門方式之一,正如@pakOverflow在上面提到的那樣。

另一個偉大的(簡單)intro從MyKong:https://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/

一(的多)的事情要記住的是,你要分開的關注(見https://en.wikipedia.org/wiki/Separation_of_concerns)。在Java中,努力讓相當小的,簡單的對象一起工作來完成有趣的事情,而不是將所有的代碼放入少數完成任何事情的類中。

相關問題