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

我有一个在JSP视图中填充的HTML表。此表始终包含默认今天日期的数据。数据由从数据库获取数据的自动批处理检索。但是，我必须提供一个功能性，以便能够选择日期范围上的数据。这就是我使用daterangepicker的原因。我成功地用ajax调用应用了datefilter

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

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

为了理解a，请在我的JSP视图的下半部分放置一个新表，以便您理解：

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

---

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

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

                }

---

我的建议是使用或其他一些网格技术，它们能更好地满足您的需求。您所需要做的就是导入相关的JS文件，并在json和表之间创建映射。如果你在这方面需要帮助，一定要告诉我。谢谢你的时间，我终于找到了解决我的问题的办法。检查我的答案很高兴您能够解决：

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

**//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>");

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

                }

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

                    });
                }