I am developing a website to display data that has to be ordered by the users needs. And I do not know how to solve my problem. I have done all the things that were described here. But at the end when I run it on the browser it is not working.
This is just the ajax code that is getting the data and returning the table of the editor view:
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 ");
}
%>
And this is view of the browser code:
<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>
And this is my index.html page where all the data gets put in:
<!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>
I hope my code is not too messy or at least readable. It would be great if somebody would be able to solve my problem. Thanks in advance
Solved the problem through adding the code below after the function where the table is created:
But this code is better described here.