javascript - AJAX 请求后刷新 HTML(JSP View )表

Question

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

我现在想做的是，当我选择一个新的 DateRange 时，我用默认日期和所选日期的数据更新我已经存在的 HTML 表格，以用表格中的新数据替换旧数据

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

<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 View 的下部放了一个新表，以便您理解:

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

                }

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

                    });
                }