无法在按钮单击Ajax调用时初始化Jquery数据表

unable to Initialize Jquery DataTables on button click Ajax call

本文关键字：初始化 Jquery 数据表 调用 Ajax 按钮 单击      更新时间：2023-09-26

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

我正在初始化数据表，如下所示，

<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();数据表已初始化，但它没有保留。

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

问题是您在加载表之前初始化插件。您必须等待 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传递新数据，比如：

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

如文档中所述。Javascript 源数据

相关文章：