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

Question

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

我想要做的是现在，当我选择一个新的日期范围我更新与选定日期的默认日期与数据我已经HTML表格来代替我的表用新数据旧数据

这是我与我想更新表JSP页面当我选择一个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视图，使下部的目的你明白：

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

Answer 1

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

       } 

准备areTable（）函数被触发（调用）当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); 
          } 
         } 

        }); 
       }