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

Question

这是我的 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>

以上代码运行良好，数据 table 通过调用控制器方法填充数据在页面加载时初始化。

现在，在单击事件中我调用 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 已初始化但未保留。

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

Answer 1

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

但是您可以传递来自 ajax 的新数据，例如：

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

如文档中所述。 Javascript sourced data

Answer 2

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

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

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

unable to Initialize Jquery DataTables on button click Ajax call

javascript

ajax

jquery

datatables

asp.net-mvc-partialview