在 AJAX 请求后刷新 HTML(JSP 视图)表

Question

我有一个HTML表，它填充在我的JSP视图中。此表始终包含默认今天日期的数据。数据由从数据库中获取数据的自动批处理检索。但是，我必须给出一个功能才能在日期范围内选择数据。这就是我使用日期范围选择器的原因。我成功地使用 ajax 调用应用了日期过滤器。

我现在要做的是当我选择一个新的日期范围时，我使用所选日期的数据使用默认日期更新我已经的 HTML 表，以用表中的新数据替换旧数据

这是我的 JSP 页面，其中包含我在选择日期范围时要更新的表：

<div class="panel-body">
    <table width="100%"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 width="100%" 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>");

Answer 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);
                }

prepareTable(( 函数在 Ajax 调用成功时触发(调用(：

                    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);
                            }
                        }
                    });
                }