刷新其容器div后如何應用jQuery databale？

Question

我正在嘗試在刷新容器div后應用jQuery數據表結構。

我有一個div，其中有數據表。 對於第一次訪問，它工作正常，但是在單擊按鈕事件時，我正在刷新它的父div。 之后，我期望表上有數據表結構，但無法正常工作。

<div id="students">   
    <table id="studTable" class="table fullwidth data">
        <thead>
            <tr>
                <th> Name</th>
                <th> DOB</th>
                <th> Email</th>
            </tr>
        </thead>
        <tbody>
        @foreach (var stud in Model)
        {
            <tr>
                <td>@stud.Name</td>
                <td>@stud.DOB</td> 
                <td>@stud.Email</td> 
            </tr>
        }
        </tbody>
    </table>
</div>

我正在從MVC視圖中的模型讀取數據。 首次加載時，它顯示了jQuery數據表結構。 在按鈕上單擊，我執行以下jQuery代碼：

<script type="text/javascript">
    $(".submit").click(function (event) {
        $("#students").load(location.href + " #students");
            $("#studTable").dataTable({
                "bSort": false,
                "bPaginate": true,
                "bInfo": true,
                "bFilter": false,
                "bLengthChange": false,
                "pagingType": "simple_numbers",
        });
    })
</script>

這段代碼重新加載了學生 div，但數據表未應用。 當我在setTimeout函數中編寫數據表的代碼時，它會正確加載jQuery數據表。

setTimeout(function () {          
        }, 1000);

但是這里我不想使用此setTimeout(function(){},1000);

對於這種情況有什么解決方案嗎？

Answer 1

.load()函數是異步的，因此實際上，您嘗試在內容完成加載之前嘗試應用DataTables插件。 與其在下一行代碼中應用該插件，不如在異步回調中應用它：

$("#students").load(location.href + " #students", function () {
    $("#studTable").dataTable({
        "bSort": false,
        "bPaginate": true,
        "bInfo": true,
        "bFilter": false,
        "bLengthChange": false,
        "pagingType": "simple_numbers",
    });
});