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>

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

现在，点击事件我调用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

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

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

Answer 2

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

但是您可以从ajax传递新数据，如：

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

如文档中所述。 Javascript sourced data

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

2 个答案: