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

        }); 
       }