我坚信这个问题最合适的解决方案是使用 Hussain Akhtar Wahid 建议的 AJAX，但我建议将产品数据转换为 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 之间交替其值。这控制了排序的方向。
display 方法通过将产品数组中的每个产品对象传递给 tableRow 构造函数对象的构造函数来生成屏幕输出。然后通过调用该对象的 generateHTML() 方法，生成每一行的 HTML。
这是用于生成 HTML 的模板示例：
var name = "<div id='mainitemlistname'>
<a href='product?pid=prdID'>prdNAME</a></div>";
此方法将占位符替换为prdID从prdName产品中获取的真实值，并将 HTML 字符串返回给 display 方法。然后通过设置 innerHTML 属性将此 HTML 插入到 ShowProduct DOM 中。
尽管您有一些代码可以为您的问题提供粗略的解决方案，但可以大大改进此 JavaScript。但我必须重申，这不是解决此问题的最佳方法，尤其是当您使用我确信您知道是禁忌的 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;
}