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

Intailize The Table

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

清理旧桌

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

在AJAX处理之后重新初始化jQuery dataTable

1 个答案: