Обновить таблицу HTML (JSP view) после запроса AJAX

Question

У меня есть таблица HTML, которая заполнена в моем представлении JSP. В этой таблице всегда содержатся данные о сегодняшней дате по умолчанию. Данные извлекаются автоматической партией, которая извлекает данные из базы данных. Однако я должен предоставить функции, чтобы иметь возможность выбирать данные на daterange. Вот почему я использую daterangepicker. Мне удалось применить к datefilter с помощью вызовов ajax.

То, что я хочу сделать, это теперь, когда я выбираю новую DateRange я обновить уже 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> 

Вот моя 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); 

       } 

приготовительное 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); 
          } 
         } 

        }); 
       }