Question

我正在使用纯Javascript和JSP作为我的前端目的。点击搜索功能后，我以ArrayList的形式从我的数据库中获取它，并显示在表格中。

一切正常。

现在我的要求是，员工数据可以用不同的方式进行整理，如（员工姓名，员工年龄）

为此，我使用了两个Comparator类，即Age和Name。

UI上有一个按钮（按名称排序），点击该功能后，如何实现数据的排序？

Answer 1

在服务器端执行JSP代码以生成要发送回浏览器的网页。您的Javascript代码 - 包括任何onclick事件处理程序 - 在客户端（由浏览器）执行，并且将无法执行任何服务器端（JSP）代码。但是，您可以使用AJAX异步请求服务器响应，然后使用响应文本动态更新页面的DOM。

您要做的是对服务器进行AJAX调用以检索信息，使用所需的顺序对其进行排序（使其成为请求URL的参数），生成表格的HTML（仅表格） - 没有别的）使用有序数据，然后将该HTML作为对AJAX调用的响应发回。

我无法向您提供有关如何对AJAX调用进行服务器端处理的更多信息，但我可以为您提供Javascript代码（在jQuery中，因为它使得它更容易）。

<div id="mydiv">
<table>
// table contents here
</table>
</div>

function ajax() {
    url = URL that will handle the AJAX call;
    $.get(url, function (data) {
        success(data);
    });
}

function success(data) {
    $('#mydiv').html(data);
}

该表包含在div元素中，因为它可以更轻松地更新页面的相关部分。

Answer 2

UI上有一个按钮（按名称排序）。现在请点击那个告诉我功能，我怎么能实现这个？

在我看来，你可以通过两种方式实现这一目标：

服务器端方式（推荐），因为JavaScript需要大量的CPU和内存资源。因此，在客户端定义一个按钮并向服务器发出请求。将URL添加到URL，以便服务器端脚本可以标识所请求的操作。排序后，将新输出发送回客户端。
您可以使用JS框架，例如jQuery和jGrid（在示例中），但相信我它效率不高。

（注意：有关更多详细信息，我们需要您提供更多信息。）

在Javascript函数和JSP中排序

2 个答案: