AJAX處理後重新初始化jQuery數據表

Question

我試圖在簡單刪除Ajax過程後重新加載我的數據表。所以基本上在頁面加載dataTable得到初始化，並根據我的需要工作得很好。在表中，我有一個按鈕，允許我刪除特定的條目（行）。點擊這個按鈕後，我使用AJAX處理這個刪除函數，然後在函數成功的情況下，我重新加載我的表格，並將更新後的數據從表格中刪除。儘管當這個函數被實例化時，我的表失去了jQuery的dataTable功能，並返回到一個普通表。

這是我刪除行Ajax調用：

var oTable = $(".all_sightings_table").dataTable({ 
     "sDom": "<'row'<''l><''f>r>t<'row'<''i><''p>>" 
    }); 

    function reinitialiseTable() { 
     $(".all_sightings_table").dataTable(); 
    } 



$(document).on("click", ".delete_sighting", function() { 
     if(oTable != undefined) { 
      oTable.fnClearTable(); 
     } 
     var id = +$(this).val(); 
     reset(); 
     $("#toggleCSS").attr("href", "${pageContext.request.contextPath}/static/style/alertify.bootstrap.css"); 
     alertify.confirm("Are you sure you want to delete this sighting?", function(e) { 
      if(e) { 
       $.ajax({ 
        url: "${pageContext.request.contextPath}/deleteSighting/" + id, 
        type: "DELETE", 
        success: function(result) { 
         $(".all_sightings_container").load("${pageContext.request.contextPath}/dashboard #all_sightings_table"); // reload table after processess 
         $(".sightings_container").load("${pageContext.request.contextPath}/userSightings #sightings_table"); 
         alertify.success("You have succesfully deleted the sighting"); 
         reinitialiseTable(); // attempting to reintialise dataTable 
        } 
       }); 
      } else { 
       alertify.error("Operation has been cancelled"); 
      } 
     }); 
    }); // end of function 

所以我試圖打電話給我的功能重新初始化我的dataTable，雖然失敗，無法正常工作。這是我試圖重新初始化表：

<!-- All sightings container -->  
          <div class="all_sightings_container table-responsive"> 
           <table id="all_sightings_table" class="all_sightings_table table table-hover table-bordered"> 
            <thead> 
             <tr class="active"> 
              <td>Sighting ID:</td> 
              <td>Park of Sighting:</td> 
              <td>Location in Park:</td> 
              <td>Pest Name:</td> 
              <td>Total Pest's Sighted:</td> 
              <td>Sighted Date:</td> 
              <td>Submitted by:</td> 
              <td>Additional Information:</td> 
              <sec:authorize access="hasAnyRole('ROLE_ADMIN','ROLE_STAFF')"> 
               <td>View all by User:</td> 
               <td>Delete:</td> 
              </sec:authorize> 
             </tr> 
            </thead> 
            <tbody> 
             <c:forEach var="sighting" items="${sightings}"> 
              <tr> 
                <td><c:out value="${sighting.id}"/></td> 
                <td><c:out value="${sighting.park}"/></td> 
                <td><c:out value="${sighting.location}"/></td> 
                <td><c:out value="${sighting.pest_name}"/></td> 
                <td><c:out value="${sighting.total_pests}"/></td> 
                <td><c:out value="${sighting.date}"/></td> 
                <td><c:out value="${sighting.username}"/></td> 
                <td><c:out value="${sighting.information}"/></td> 
                <sec:authorize access="hasAnyRole('ROLE_ADMIN', 'ROLE_STAFF')"> 
                 <td> 
                  <a class="sighting" href="<c:url value="/userSightings"><c:param name="username" value="${sighting.username}"/></c:url>"><button class="btn btn-success">User Sightings</button></a> 
                 </td> 
                 <td> 
                  <button class="delete_sighting btn btn-danger" value="${sighting.id}">Delete Sighting</button> 
                 </td> 
                </sec:authorize> 
               </tr> 
             </c:forEach> 
            </tbody> 
            </table> 

我一直在使用的功能fnDraw（）和其他人嘗試過，但仍沒有運氣。 所有的答案讚賞。由於

Answer 1

Intailize表

var oTable = $(".all_sightings_table").dataTable(); 

清除舊錶

if (oTable != undefined) { 
oTable.fnClearTable(); 
};