我正在开发一个网站,以显示必须由用户需求订购的数据。而且我不知道如何解决我的问题。我已经完成了here中描述的所有操作。但是最后,当我在浏览器中运行它时,它不起作用。
这只是获取数据并返回编辑器视图的表的ajax代码:
try {
/*
Making call to database
and getting all the data
*/
int count = metaData.getColumnCount();
%>
<table id="table" class="sortable table table-hover table-mc-light-blue">
<thead>
<tr>
<%
for(int i=1; i<=count; i++){
%><th scope="col" class="mdl-data-table__cell--non-numeric"><%
out.print(metaData.getColumnName(i));
%></th><%
}
%>
</tr>
</thead>
<tbody>
<%
while(resultSet.next()){%>
<tr onclick="rowClickable(this)" class="n_title">
<%for(int i= 1; i<= count; i++){
if(metaData.getColumnName(i).equals("PLANT")){
%><td scope="row" id="clicked"><%
out.println("<a class='disabledLink' href='"+resultSet.getString(i)+"'>");
out.println(resultSet.getString(i));
out.println("</a>");
%></td><%
} else {
%><td><%
out.println(resultSet.getString(i));
%></td><%
}
}%>
</tr>
<%}
%>
</tbody>
<tfoot></tfoot>
</table>
<script src="sorttable.js" type="text/javascript"></script>
<% connection.close();
}
catch(Exception e){
out.println("\n<P> SQL error: <PRE> " + e + " </PRE> </P>\n ");
}
%>
这是浏览器代码的视图:
<table id="table" class="sortable table table-hover table-mc-light-blue">
<thead>
<tr>
<th scope="col" class="mdl-data-table__cell--non-numeric">PLANT</th><th scope="col" class="mdl-data-table__cell--non-numeric">NAME</th><th scope="col" class="mdl-data-table__cell--non-numeric">COUNT</th>
</tr>
</thead>
<tbody>
<tr onclick="rowClickable(this)" class="n_title">
<td scope="row" id="clicked"><a class='disabledLink' href='ABI'>
ABI
</a>
</td></tr>
</tbody>
<tfoot></tfoot>
</table>
<script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
<script src="js/plugins/material.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/created/main.js" type="text/javascript"></script>
这是我的 index.html 页面,所有数据都放入其中:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/created/styles.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-grid.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-grid.min.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap-reboot.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/plugins/material.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<nav id="navbar">
<button id="hiddenBackButton" type="button">Back</button>
<div id="searchNav">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="search" onkeyup="searchFunction('#switch-1',this.value, 'table', 'search')" type="text">
<label class="mdl-textfield__label" id="searchLabel" for="sample3" style="margin-bottom: 0.0px">Search by Name</label>
</div>
<div style="width: 10%; display: inline-block;">
<span style="
cursor: default;
font-size: 16px;
line-height: 24px;
margin: 0;
left: 24px">Plant
</span>
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input onclick="changeSearchText(this)" type="checkbox" id="switch-1" class="mdl-switch__input">
</label>
<span style="
cursor: default;
font-size: 16px;
line-height: 24px;
margin: 0">Name
</span>
</div>
</div>
</nav>
<main id="response_body">
<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
</main>
<script src="js/plugins/jquery_3.3.1.js" type="text/javascript"></script>
<script src="js/plugins/material.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.js" type="text/javascript"></script>
<script src="js/plugins/bootstrap.min.js" type="text/javascript"></script>
<script src="sorttable.js" type="text/javascript"></script>
<script src="js/created/main.js" type="text/javascript"></script>
<script>
window.onload = loadDataAjax("response_body");
</script>
</body>
</html>
我希望我的代码不会太混乱或至少不易读。如果有人能够解决我的问题,那就太好了。预先感谢