AJAX 请求后刷新 HTML（JSP 视图）表

Posted 2023-03-05

【中文标题】AJAX 请求后刷新 HTML（JSP 视图）表

【英文标题】：Refresh HTML(JSP view) table after AJAX request

【发布时间】：2017-07-03 18:11:43

【问题描述】：

我有一个在我的 JSP 视图中填充的 html 表。此表始终包含默认今天日期的数据。数据由从数据库中获取数据的自动批处理检索。但是我必须提供一个功能才能选择日期范围内的数据。这就是我使用 daterangepicker 的原因。我成功地通过 ajax 调用申请 datefilter。

我现在想要做的是，当我选择一个新的 DateRange 时，我会使用来自所选日期的数据使用默认日期更新我的 HTML 表格，以便用表格中的新数据替换旧数据

这是我的 JSP 页面，其中包含当我选择 a DATERANGE 时要更新的表：

<div class="panel-body">
    <table class="table table-striped table-bordered table-hover" id="tableUp">
        <thead>
            <tr>
                <th>FormName</th>
                <th>Type</th>
                <th>Language</th>
                <th>Sent To NAS</th>
                <th>Sending Date</th>
                <th>FeedBack Received</th>
                <th>Feedback not Received</th>
            </tr>
        </thead>
        <tbody id='tbod'>
            <tr class="odd gradeX" id="myTable">
                <c:forEach var="item" items="$eblinb2b_list">
                    <tr id=1>
                        <td><c:out value="$item.form_name" /></td>
                        <td><c:out value="$item.mode" /></td>
                        <td><c:out value="$item.language" /></td>
                        <td><c:out value="$item.count" /></td>
                        <td><c:out value="$item.sendingDate" /></td>
                        <td><c:out value="" /></td>
                        <td><c:out value="" /></td>
                    </tr>
                </c:forEach>
            </tr>
        </tbody>
    </table>
</div>

为了便于理解，在我的 JSP 视图的下部放了一个新表，以便您理解：

<!-- DateRange PICKER -->

<div class="panel-body">
    <table  class="class2" id="mainTable">
        <thead>
            <tr>
                <th>FormName</th>
                <th>Type</th>
                <th>Language</th>
                <th>Sent To NAS</th>
                <th>Sending Date</th>
                <th>FeedBack Received</th>
                <th>Feedback not Received</th>
            </tr>
        </thead>
        <tbody>
            <tr class="odd gradeX" id="myTable1"></tr>
        </tbody>
    </table>
    <input type="text" name="datepickerinput" id="datepicker" value="" />
</div>
<!-- /.panel-body -->
<button onclick="filterByDate()" id="button">Apply filter</button>

这是我的 JavaScript 函数部分，用于填充我的第二个表格以进行说明

**//Function for populating second table with Ajax JSON response**
var table = $("#mainTable tbody");
$.each(data, function(idx, elem) 
    var time = new Date(elem.sendingDate);
    var parsedTime = time.getDate() + "/" + (time.getMonth() + 1) + "/"
                                    + time.getFullYear();

    table.append("<tr><td>" + elem.form_name + "</td><td>"
                            + elem.mode + "</td><td>" + elem.language
                            + "</td><td>" + elem.count + "</td><td>"
                            + parsedTime + "</td></tr>");

【问题讨论】：

我的建议是使用 jQgrid 或其他一些网格技术，这可以更好地满足您的要求。您需要做的就是导入相关的JS文件并创建json和table之间的映射。如果您需要任何帮助，请告诉我。

感谢您的宝贵时间，我终于找到了适合我的情况的解决方案。检查我的答案

很高兴你能解决:)

【参考方案1】：

我终于成功解决了这个问题，这是我的最后一个函数，它通过放置数据并替换旧表来更新表：

                    function prepareTable(data) 

                    //Function for populating table with Ajax JSON response

                    var table = $("#tableUp #tbody1");
                    var html = "";
                    $.each(data, function(idx, elem) 

                        var time = new Date(elem.sendingDate);

                        var parsedTime = time.getDate() + "/"
                                + (time.getMonth() + 1) + "/"
                                + time.getFullYear();

                        html += "<tr><td>" + elem.form_name + "</td><td>"
                                + elem.mode + "</td><td>" + elem.language
                                + "</td><td>" + elem.count + "</td><td>"
                                + parsedTime + "</td><td></td><td></td></tr>";

                    );

                    table.html(html);

                

Ajax调用成功时触发（调用）prepareTable()函数：

                    function filterByDate() 

                    var startDate = document.getElementById("datepicker").value
                            .substring(0, 10);

                    var endDate = document.getElementById("datepicker").value
                            .substring(13, 23);

                    $.ajax(
                        url : '/gms/eblinb2b/filterOnDate',

                        data : 
                            "startDate" : startDate,
                            "endDate" : endDate
                        , //here you send the daterange over an Ajax request and by default it's sended with a GET method
                        success : function(data) 

                            //here you will see displaying the callback result coming from your spring controller
                            console.log(data);

                            //Here we populate the HTML table with the new data based on the new daterange filter applied and replace the old data in my table
                            prepareTable(data);

                        ,

                        error : function(xhr, ajaxOptions, thrownError) 
                            if (xhr.status == 404) 
                                alert(thrownError);
                            
                        

                    );