0
我有一個頁面editpatient.jsp，其中包含頁面patientlist.jsp。當您運行editpatient.jsp時，它會顯示數據庫中存在的所有記錄。我有一個下拉列表，還有一個搜索字段來指定搜索。所以當我運行editpatient.jsp時，它會以數據庫中存儲的方式顯示所有記錄。所以我想根據名稱和顯示進行分類。所以請告訴我如何做到這一點。當你點擊姓名或電子郵件或城市則按照相應如何根據名稱在jsp頁面中顯示名稱
patientlist.jsp
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%@ page import="DB.*" %>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.evenRow{
height: 50px;
background-color: white;
text-transform: none;
text-shadow: none;
color: black;
}
.evenRow:hover
{
background-color: #C2FEF0;
}
.row{
height: 50px;
background-color: #E4E6E6;
text-transform: none;
text-shadow: none;
color: black;
}
.row:hover {
background-color: #C2FEF0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<table style="border-collapse: collapse;overflow-x: scroll; width:97%">
<tr style="background-color:grey;height:50px">
<th style="min-width: 100px">
NAME
</th>
<th style="min-width: 100px">
CITY
</th>
<th style="min-width: 100px">
LAST VISIT
</th>
<th style="min-width: 100px">
MOBILE
</th>
<th style="min-width: 100px">
EMAIL
</th>
<th style="min-width: 100px">
STATUS
</th>
<th style="min-width: 100px">
VIEW
</th>
<th style="min-width: 100px">
EDIT
</th>
</tr>
<%
DataBaseConnection db = new DataBaseConnection();
Connection con = db.connet();
PreparedStatement pt = con
.prepareStatement("select * from Patient");
ResultSet rs = pt.executeQuery();
String searchBy = request.getParameter("searchBy");
String searchElement = request.getParameter("searchElement");
int count = 0;
int index = -1;
boolean name = false;
if ("city".equalsIgnoreCase(searchBy))
index = 9;//change the index to the index of the city
else if ("firstName".equalsIgnoreCase(searchBy))
index = 1;
else if ("lastName".equalsIgnoreCase(searchBy))
index = 2;
else if ("name".equalsIgnoreCase(searchBy)) {
index = 1;
name = true;
}
while (rs.next()) {
if (searchElement == null
|| ((searchElement.equals(rs.getString(index)) && !name) || (name && searchElement
.equalsIgnoreCase(rs.getString(index) + " "
+ rs.getString(index + 1))))) {
if (count++ % 2 == 0) {
%>
<tr class="evenRow" >
<td>
<%=rs.getString(1)%>
</td>
<td>
<%=rs.getString(2)%>
</td>
<td>
<%=rs.getString(3)%>
</td>
<td>
<%=rs.getString(4)%>
</td>
<td>
<%=rs.getString(5)%>
</td>
<td>
<%=rs.getString(6)%>
</td>
<td>
<form action="getPatientDetails.jsp"><input type="hidden" name="hidden" value="<%=count%>"/><input type="submit" value="view"></form>
</td>
<td>
<a onclick="renderEdit(<%out.println("edit");%>)"><%
out.println("edit");
%></a>
</td>
</tr>
<%
} else {
%>
<tr class="row">
<td>
<%=rs.getString(1)%>
</td>
<td>
<%=rs.getString(2)%>
</td>
<td>
<%=rs.getString(3)%>
</td>
<td>
<%=rs.getString(4)%>
</td>
<td>
<%=rs.getString(5)%>
</td>
<td>
<%=rs.getString(6)%>
</td>
<td>
<a onclick="renderView(<%out.println("view");%>)"><%
out.println("view");
%></a>
</td>
<td>
<a onclick="renderEdit(<%out.println("edit");%>)"><%
out.println("edit");
%></a>
</td>
</tr>
<%
}
}
}
%>
</table>
</body>
</html>
editpatient.jsp
<%@ page import="java.util.*" %>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
<script type="text/javascript">
var request;
function getRequestObject()
{
if (window.ActiveXObject)
{
return(new ActiveXObject("Microsoft.XMLHTTP"));
}
else if (window.XMLHttpRequest)
{
return(new XMLHttpRequest());
}
else {
return(null);
}
}
function sendRequest()
{
request = getRequestObject();
request.onreadystatechange = handleResponse;
var address = "patientList.jsp?searchBy=" + document.getElementById("searchBy").value + "&searchElement="+ document.getElementById("searchElement").value;
request.open("GET", address, true);
request.send(null);
}
function handleResponse()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("table").innerHTML = request.responseText;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Edit Patient</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<form id="f1" name="f1" method="post" onsubmit="ccheck();" >
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup align="center">
<h3>Edit Patient</h3>
</hgroup>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<div class="articleBody clear">
search:
<select id="searchBy">
<option value="lastName">Last Name</option>
<option value="firstName">First Name</option>
<option value="name">Name</option>
<option value="city">City</option>
</select>
<input id="searchElement"/>
<input type="button" value="Search" onclick="sendRequest();"/>
</div>
</article>
<div id="table" align="center">
<jsp:include page="patientList.jsp" />
</div>
</article>
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<a href="#" class="up">Go UP</a>
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</form>
</body>
</html>
謝謝回答，但你給使用PHP和在我的項目，我不使用PHP – JavaCoding 2013-04-23 05:15:11
鏈接Okies ..我只給它作爲參考，擴展您的搜索數據表使用javascript – gks 2013-04-23 05:19:53