我坚信最适合这个问题的解决方案是使用AJAX，正如Hussain Akhtar Wahid所建议的那样，我的建议是将产品数据转换为JSON对象并将其传递给JavaScript函数将允许您主要使用JavaScript。但是，如果您只能使用请求对象和JavaScript，那么我有一个解决方案。
总之，您必须从请求对象获取产品数据到JavaScript对象中。这是可能的，但它不是一个漂亮的。然后，一旦产品数据位于JavaScript对象中，您可以使用JavaScript中的自定义排序功能对其进行排序。
下面是修改后的JSP代码：ShowProduct.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Product Catalogue</title>
<link rel="stylesheet" type="text/css" href="sortList/layout.css" />
<script type="text/javascript" src="sortList/sort.js"></script>
<script type="text/javascript">
//Puts the products into the product array of the catalogue object
<%
List<Integer> prdIDList = (List<Integer>) request.getAttribute("prodID");
List<String> prdNAMEList = (List<String>) request.getAttribute("prodNAME");
List<String> prdIMAGEList = (List<String>) request.getAttribute("prodIMAGE");
List<Float> prdPRICEList = (List<Float>) request.getAttribute("prodPRICE");
List<String> prdFEATUREList = (List<String>) request.getAttribute("prodFEATURE");
for (int i = 0; i < prdIDList.size(); i++) {
Integer prdID = prdIDList.get(i);
String prdNAME = prdNAMEList.get(i);
String prdIMAGE = prdIMAGEList.get(i);
Float prdPRICE = prdPRICEList.get(i);
String prdFEATURE = prdFEATUREList.get(i);
%>
catalogue.product[<%=i%>] = {pId:<%=prdID%>, pImage:"<%=prdIMAGE%>", pName:"<%=prdNAME%>", pPrice:<%=prdPRICE%>, pFeature:"<%=prdFEATURE%>"};
<%
}
%>
</script></head>
<body onload="catalogue.sortByName()">
<button onclick="catalogue.sortById()">Sort By Id</button>
<button onclick="catalogue.sortByName()">Sort By Name</button>
<button onclick="catalogue.sortByPrice()">Sort By Price</button>
<div id="container"><div id="mainitemlist"></div></div>
</body></html>
很多变化走过去的，所以我会很简短。两大变化。
不是立即显示产品数据，而是循环访问列表并将数据放入JavaScript对象数组中。该数组称为产品并且是目录文字对象的属性。请参阅下面的JavaScript文件。
catalogue.product[<%=i%>] = {pId:<%=prdID%>, pImage:"<%=prdIMAGE%>", pName:"<%=prdNAME%>", pPrice:<%=prdPRICE%>, pFeature:"<%=prdFEATURE%>"};
我创建了一个DIV成一旦分拣插入产品数据。
<div id="container"><div id="mainitemlist"></div></div>
我也创建了
<button onclick="catalogue.sortById()">Sort By Id</button>
<button onclick="catalogue.sortByName()">Sort By Name</button>
<button onclick="catalogue.sortByPrice()">Sort By Price</button>
我创建了一个称为sort.js一个JavaScript文件，该文件进行排序，并显示该产品数据的产品数据进行排序三个按钮。
// The catalogue literal object
var catalogue = {
sortDirection: -1, // The direction of the sort
product: [], // The product list generated by the JSP
// Sorts the products by their ID
sortById: function sortById() {
catalogue.product.sort(function(a, b) {
return catalogue.sortDirection * (a.pId - b.pId);
});
catalogue.sortDirection *= -1;
catalogue.display();
},
// Sorts the products by their NAME
sortByName: function sortByName() {
catalogue.product.sort(function(a, b) {
var result = 0;
var nameA = a.pName.toLowerCase(), nameB = b.pName.toLowerCase();
if (nameA < nameB) {
result = -1;
} else if (nameA > nameB) {
result = 1;
} else {
result = 0;
}
return catalogue.sortDirection*result;
});
catalogue.sortDirection *= -1;
catalogue.display();
},
// Sorts the products by their PRICE
sortByPrice: function sortByPrice() {
catalogue.product.sort(function(a, b) {
return catalogue.sortDirection * (a.pPrice - b.pPrice);
});
catalogue.sortDirection *= -1;
catalogue.display();
},
// Displays the sorted products
display: function display(){
var node = document.getElementById('container');
while (node.hasChildNodes()) {
node.removeChild(node.firstChild);
}
var html = "";
for(var i = 0; i < catalogue.product.length; i++){
var tableRow = new catalogue.tableRow(catalogue.product[i]);
html += tableRow.generateHTML();
}
document.getElementById('container').innerHTML = html;
},
// Contructor object for the table row
tableRow: function tableRow(product){
this.id = product.pId;
this.image = product.pImage;
this.name = product.pName;
this.price = product.pPrice;
this.feature = product.pFeature;
var image = "<div id='mainitemlist'><div id='mainitemlistimage'><a href='product?pid=prdID'><img src='product_images/prdIMAGE'></a></div>";
var name = "<div id='mainitemlistname'><a href='product?pid=prdID'>prdNAME</a></div>";
var price = "<div id='mainitemlistprice'>prdPRICE</div>";
var features = "<div id='mainitemlistfeatures'>prdFEATURE</div></div>";
this.generateHTML = function generateHTML(){
html = "";
html += image.replace("prdIMAGE", this.image).replace("prdID", this.id);
html += name.replace("prdNAME", this.name).replace("prdID", this.id);
html += price.replace("prdPRICE", this.price);
html += features.replace("prdFEATURE", this.feature);
return html;
};
}
};
该脚本创建一个目录文字对象，该对象包含对产品数据进行排序和显示所需的所有属性和方法。
有三种排序函数：sortById，sortByName和sortByPrice。每个实现自定义排序。我不会解释自定义排序是如何工作的，因为互联网上有很多文章可以很好地解释它。
为了排序是双向的（在点击排序按钮时排序从低到高排列）我使用sortDirection变量，它的值在1和-1之间交替变化。这控制了排序的方向。
显示方法通过将产品数组中的每个产品对象传递给tableRow构造函数对象的构造函数来产生输出到屏幕。然后通过在这个对象上调用generateHTML（）方法来生成每一行的HTML。
这
，用于生成HTML模板的一个例子：
var name = "<div id='mainitemlistname'>
<a href='product?pid=prdID'>prdNAME</a></div>";
此方法替换占位prdID和prdName与真实值，从所得产物，并返回HTML字符串来显示方法。然后通过设置innerHTML属性将此HTML插入到ShowProduct DOM中。
这个JavaScript可以大大改进，但是你有一些代码可以给你一个粗略的解决你的问题的代码。但我必须重申，这不是解决此问题的最佳方法，尤其是在您使用scriptlet时，我确信您知道这些scriptlet是禁忌。
编辑：它缺少CSS，见下文。将它保存在一个名为layout.css中，进口是在HTML中，像这样的HEAD元素：<link rel="stylesheet" type="text/css" href="sortList/layout.css" />
div#mainitemlist{
float: left;
width: 100%;
}
div#mainitemlistimage {
float: left;
width: 200px;
}
div#mainitemlistimage img{
height: 125px;
width: 100px;
}
div#mainitemlistname{
float: left;
width: 200px;
}
div#mainitemlistname a{
color: #9caeb9;
text-decoration: none;
}
div#mainitemlistprice{
float: left;
width: 200px;
}
div#mainitemlistfeatures{
float: left;
width: 200px;
}
可以使按钮的点击和响应AJAX调用get排序列表 –
@反斜线 - 是的，先生我没有在这里添加Java脚本。我已经定义了它，但是如何将所有数据导入它我不知道如此不能继续前进。您会告诉我如何将价格数据数据导入Java Script吗？ –
@Sniffer他知道这一点。事实上，他正在Java生成的页面上谈论javascript。 – BackSlash