AJAX 处理后重新初始化 jQuery dataTable

Question

我试图在一个简单的删除 Ajax 过程之后重新加载我的 dataTable。所以基本上在页面加载时，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

详细化表格

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

清理旧表

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