jQuery DataTable 刷新数据 - 首先 MVC 视图构建 table，然后尝试显示通过 ajax 检索到的数据

Question

我正在使用 MVC5，我最初加载我的数据table 通过遍历我的模型数据，手动构建 table 元素在文档准备好后，我将我的 table 初始化为一个.datatable()。这部分工作得很好。现在，我允许我的用户更改他们想要显示的数据（通过下拉选择、更改事件触发和调用 AJAX 控制器方法、returns JSON 对象），但是新的初始化dataTable的似乎不想合作。此时什么都看不到。

这是我的 table 在我看来：

  <table class="table table-bordered" id="accountRequestStatus" name="accountRequestStatus">
                    <thead>
                        <tr>
                            <th>Col1</th>
                            <th>Col2</th>
                            <th>Col3</th>
                            <th>Col4</th>
                            <th>Col5</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var request in Model.PayLoad)
                        {
                            <tr class="registerRow" id="register@(request.Col1)">
                                <td class="value registerRow">@request.Col2</td>
                                <td class="value registerRow">@request.Col3</td>
                                    <td class="value registerRow">@request.Col4</td>
                                    <td class="value registerRow">@request.EmailAddress</td>
                                <td>@Html.ActionLink("Click Me, Bro", ControllerMethod, new { param1 = request.MyParam1 })</td>
                            </tr>
                        }
                    </tbody>
                </table>

文档就绪：

 $(document).ready(function () {
    // Setting the filter button status to the selected value

    $('#accountRequestStatus').dataTable();});

砰。这一切都很顺利，谢谢你！

现在，当我尝试重新加载只有一列的网格时，我总是得到 'Cannot Reinitialize Datatable'。当我处理单个列时，我将视图的 table 修改为只有 1.

我的原始示例有 4-5 列，但在我的测试中 table 我已将其删除为单列。这是我专门（我认为）将列连接到数据（并添加名称）所做的工作。单击事件调用 LoadDataTable 函数，如下所示。

  function LoadDataTable(data) {        

    $('#accountRequestStatus').dataTable(
        {
            paging: false,
            "data": data,
            "columns": [
               {
                   "data": "CompanyName",
                   "name": "BLAH BLAH"
               }
            ]
        }
    );}

从上面看，我似乎正在完全重新初始化 table。我想这样做，还是应该使用其他东西？

这是我的一些单列示例数据，从开发人员工具中复制：

你能看出我做错了什么吗？在这一点上，我想完成我开始的方式，这样我就可以称之为 'good'。感谢您的帮助！

Answer 1

使用destroy：

Initialise a new DataTable as usual, but if there is an existing DataTable which matches the selector, it will be destroyed and replaced with the new table.

$('#accountRequestStatus').dataTable(
    {
       destroy : true, //<-- here
       paging: false,
       "data": data,
       "columns": [
           {
               "data": "CompanyName",
               "name": "BLAH BLAH"
           }
        ]
    }
);}

jQuery DataTable 刷新数据 - 首先 MVC 视图构建 table，然后尝试显示通过 ajax 检索到的数据

jQuery DataTable refreshing data - MVC View building table first, then trying to display data retrieved via ajax

asp.net-mvc

jquery

datatables