Java 在AJAX处理之后重新初始化jQuery数据表

我试图在一个简单的删除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 

var-oTable=$（“.all\u-sightings\u-table”）.dataTable({
“sDom”：“t”
}); 
函数可重新初始化（）{
$（“.all_sights_table”）.dataTable（）；
}
$（文档）。在（“单击“，”上。删除“观察”，函数（）{
如果（可旋转！=未定义）{
oTable.fnClearTable（）；
}
var id=+$（this.val（）；
重置（）；
$（“#toggleCSS”）.attr（“href”，“${pageContext.request.contextPath}/static/style/alertify.bootstrap.css”）；
alertify.confirm（“您确定要删除此观测吗？”，函数（e）{
如果（e）{
$.ajax({
url:“${pageContext.request.contextPath}/deleteSighting/”+id，
键入：“删除”，
成功：功能（结果）{
$（“.all_sightings_container”）.load（${pageContext.request.contextPath}/dashboard#all_sightings_table）；//处理后重新加载表
$（“.sightings_container”）.load（“${pageContext.request.contextPath}/userSightings#sightings_table”）；
alertify.success（“您已成功删除该目击”）；
reinitialiseTable（）；//正在尝试重新初始化dataTable
} 
}); 
}否则{
alertify.错误（“操作已取消”）；
}
});
}); // 功能结束

所以我尝试调用我的函数来重新初始化我的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（）和其他函数，但仍然没有成功。 感谢您的回答。谢谢

把桌子放好

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

清理旧桌子

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

---

在重新初始化之前，应该使用if（oTable！=undefined）{oTable.fnClearTable（）；}；谢谢你的回复。我应该把if语句放在哪里？在Ajax的成功函数中？不，无论何时调用Ajax函数或在Ajax函数之上，如果它工作，它都会清除旧表并向表中添加新数据。我尝试过实现它，但运气不佳。我已经用实施更新了我的问题。检查是否正确。删除此函数可重新初始化（）；并在scriptJust中调用oTable.fnDraw（）；