JSP模态框产品移动历史列表过滤失效问题求助

我首次发帖，英文不是母语，见谅。我在开发Web应用的模态框，用来展示产品移动历史，数据通过Java的HttpServletRequest获取。点击按钮能弹出模态框，但没法过滤展示的列表。

现象说明 #

• 点击按钮后，模态框的h4标签能正确显示refALivrer的值
• 移除<c:if>标签后，历史记录能正常展示，但没有过滤效果

产品列表JSP代码（含按钮和过滤约束） #

...
<input type="hidden" name="inputCurrentRefALivrer">
...
<c:forEach var="listeProduitsFinis" items="${LISTPRODUITFINI}">
                <tr class="trProduitFini" data-toggle="modal"
                    data-id="${listeProduitsFinis.detCmd}"
                    data-noCmd="${listeProduitsFinis.cmd}"
                    data-noDetCmd="${listeProduitsFinis.detCmd}"
                    data-noRefALivrer="${listeProduitsFinis.refALivrer}">
                    <td style="font-size: 18px;" class="text-center" id="detCMDID">${listeProduitsFinis.detCmd}</td>
                    <td style="font-size: 18px;" class="text-center">${listeProduitsFinis.refALivrer}</td>
                    <td style="font-size: 18px;" class="text-center">${listeProduitsFinis.location}</td>
                    <td>
                        <button class="btn btn-primary btn-lg btn-block"
                            style="width: 40px; height: 40px;">
                            <span style="font-size: 1.5em; color: white"
                                class="glyphicon glyphicon-time">
                                </span>
                        </button>
                    </td>
                </tr>
            </c:forEach>
...

关联JSP与模态框的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function()
{
...
$(".table").delegate('tbody tr', 'click', function(e)
    {
        var trToUse = $(e.target).closest('tr');
        var noRefALivrer = trToUse.attr('data-noRefALivrer')
        e.preventDefault();

        if (e.target.tagName == 'BUTTON' || e.target.tagName == 'SPAN')     
        {
            $("#inputCurrentRefALivrer").attr('value', noRefALivrer);
            $("#titreh4").text("Historique de " + noRefALivrer);
            $("#modalAfficherHistorique").modal()           
        }
        else
        {
            $("#modalAfficherImage").modal()
        }
    });
...
}

模态框JSP代码（单独文件） #

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<div id="modalAfficherHistorique" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- modal content -->
        <div class="modal-content">
            <div class="modal-header" style="background-color: red;">    
                    
                <h4 id="titreh4" class="modal-title text-center"></h4>
                
                
            </div>
            <div class="modal-body text-center">
                <table class="table table-striped" id="myTable">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">DE</th>
                            <th scope="col" class="text-center">À</th>
                            <th scope="col" class="text-center">DATE</th>
                            <th scope="col" class="text-center">QUI</th>
                            <th scope="col" class="text-center">QUOI</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach var="listeHistorique" items="${LISTHISTORIQUE}">     
                            <c:if test="${listeHistorique.refALivrer == param.inputCurrentRefALivrer}">
                            
                                <tr>
                                    <td style="font-size: 10px;" class="text-center">${listeHistorique.oldLocation}</td>
                                    <td style="font-size: 10px;" class="text-center">${listeHistorique.newLocation}</td>
                                    <td style="font-size: 10px;" class="text-center">${listeHistorique.date}</td>
                                    <td style="font-size: 10px;" class="text-center">${listeHistorique.user}</td>
                                    <td style="font-size: 10px;" class="text-center">${listeHistorique.operation}</td>
                                </tr>
                            </c:if>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer" style="background-color: red;">
                <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

解决方案 #

你的问题核心是JSTL的param对象无法获取前端动态设置的隐藏域值：JSTL是服务器端渲染页面时执行的，而你用JavaScript在客户端动态修改隐藏域值时，JSTL已经执行完毕，所以param.inputCurrentRefALivrer根本拿不到你设置的noRefALivrer。

下面给两种可行的解决方法：

方法1：前端动态过滤（推荐，无需后端交互）

先把所有历史记录渲染到模态框表格（去掉<c:if>），再在弹出模态框时用JavaScript过滤对应行：

1. 修改模态框JSP，给每行加data-ref-alivrer属性：

<c:forEach var="listeHistorique" items="${LISTHISTORIQUE}">     
    <tr data-ref-alivrer="${listeHistorique.refALivrer}">
        <td style="font-size: 10px;" class="text-center">${listeHistorique.oldLocation}</td>
        <td style="font-size: 10px;" class="text-center">${listeHistorique.newLocation}</td>
        <td style="font-size: 10px;" class="text-center">${listeHistorique.date}</td>
        <td style="font-size: 10px;" class="text-center">${listeHistorique.user}</td>
        <td style="font-size: 10px;" class="text-center">${listeHistorique.operation}</td>
    </tr>
</c:forEach>

2. 修改JavaScript，弹出模态框时过滤行：

if (e.target.tagName == 'BUTTON' || e.target.tagName == 'SPAN')     
{
    var noRefALivrer = trToUse.attr('data-noRefALivrer');
    $("#titreh4").text("Historique de " + noRefALivrer);
    // 先隐藏所有行，再显示匹配的行
    $("#myTable tbody tr").hide();
    $("#myTable tbody tr[data-ref-alivrer='" + noRefALivrer + "']").show();
    $("#modalAfficherHistorique").modal();           
}

方法2：后端异步加载（需要AJAX）

点击按钮时通过AJAX把noRefALivrer传给后端，后端返回对应历史记录再渲染到模态框：

1. 修改JavaScript发起AJAX请求：

if (e.target.tagName == 'BUTTON' || e.target.tagName == 'SPAN')     
{
    var noRefALivrer = trToUse.attr('data-noRefALivrer');
    $("#titreh4").text("Historique de " + noRefALivrer);
    
    $.ajax({
        url: '你的历史记录接口路径',
        type: 'GET',
        data: { refALivrer: noRefALivrer },
        success: function(data) {
            $("#myTable tbody").empty();
            $.each(data, function(index, item) {
                var row = '<tr>' +
                            '<td style="font-size: 10px;" class="text-center">' + item.oldLocation + '</td>' +
                            '<td style="font-size: 10px;" class="text-center">' + item.newLocation + '</td>' +
                            '<td style="font-size: 10px;" class="text-center">' + item.date + '</td>' +
                            '<td style="font-size: 10px;" class="text-center">' + item.user + '</td>' +
                            '<td style="font-size: 10px;" class="text-center">' + item.operation + '</td>' +
                          '</tr>';
                $("#myTable tbody").append(row);
            });
            $("#modalAfficherHistorique").modal();
        },
        error: function() {
            alert('加载历史记录失败');
        }
    });
}

2. 后端编写接口，接收refALivrer参数，查询对应历史记录并返回JSON格式数据。

内容的提问来源于stack exchange，提问作者JR Ditleb