java - 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() などを使用してみましたが、まだ運がありません。すべての回答をいただければ幸いです。ありがとう