无法在按钮单击 Ajax 调用时初始化 Jquery DataTables答案

【问题标题】：unable to Initialize Jquery DataTables on button click Ajax call无法在按钮单击 Ajax 调用时初始化 Jquery DataTables
【发布时间】：2016-02-26 07:54:43
【问题描述】：

这是我的 HTML 部分视图，

<table id="table_id" class="table table-inverse">
            <thead class="thead-inverse">
                <tr>
                    <th>Select</th>
                    <th>StructureName</th>
                    <th>FieldType</th>
                    <th>DataType</th>
                    <th>IsHeirarchy</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td><input type="checkbox" /></td>
                        <td>@item.One</td>
                        <td>@item.Two</td>
                        <td>@item.Three</td>
                        <td>@item.Four</td>
                        <td><a href="#"> Edit</a></td>
                    </tr>
                }
            </tbody>
        </table>

我正在初始化DataTable如下图，

<script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#table_id').DataTable();
        });
</script>

以上代码工作正常，数据表在页面加载时通过调用控制器方法来填充数据进行初始化。

现在，在点击事件时，我正在调用 ajax 方法来传递输入参数以加载数据，如下所示，

$(function () {
    $('#searchbtn').on('click', function () {          
        var url = '@Url.Action("LoadGridData", "Home")';
        var clientID = $('#Clientdata').val();
        var serviceId = $('#SelectService').val();
        $.ajax({               
            type: "GET",
            dataType: "html",                
            success: function (services) {
                $('#searchResults').load(url, { intclientId: clientID, intserviceID: serviceId });
                $('#table_id').DataTable();
            }
        });
    });

});

在这里，在调试时，我可以看到 $('#table_id').DataTable(); DataTable 已初始化，但并未保留。

不确定发生了什么。任何帮助表示赞赏:)

【问题讨论】：

not staying 是什么意思？
不要在成功函数中初始化它在jquery点击事件之前初始化它
你能告诉我什么是搜索结果
#searchResults 是您表的容器吗？
是的，#searchResult 只是一个
容器

标签： javascript jquery ajax datatables asp.net-mvc-partialview

【解决方案1】：

问题是您在加载表格之前初始化插件。您必须等待加载 HTML。试试这个

    success: function (services) {
                    $('#searchResults').load(url, { intclientId: clientID, intserviceID: serviceId },function(){
                       $('#table_id').DataTable(); // now we apply plugin when the elment is available.
                    });                        
                }

【讨论】：

准确！ jquery.load() 发出请求，您立即尝试在服务器的数据进入您的视图之前初始化表... +1
非常感谢！ :) 完美的地方！

【解决方案2】：

我不确定您是否可以初始化 DataTable 两次。

但是你可以像这样从 ajax 传递新数据：

$('#table_id').DataTable( {
   data: dataSet, //from ajax result
   columns: [
       { title: "Name" },
       { title: "Position" },
       ......
   ]
});

如文档中所述。 Javascript sourced data

【讨论】：

问题在于我初始化 DataTable 函数的方式。与数据无关。无论如何感谢您的帮助！ :)