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

Question

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

这是我视野中的桌子：

  <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();});

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

现在，当我尝试仅使用一列重新加载网格时，我总是得到“无法重新初始化数据表”。当我使用单个列时，我将视图的表修改为只有 1 个。

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

  function LoadDataTable(data) {        

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

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

这是我从开发者工具复制的单列示例数据：

你能看出我做错了什么吗？在这一点上，我想完成我开始的方式，这样我就可以称之为“好”。任何帮助表示赞赏！

Answer 1

使用destroy：

像往常一样初始化一个新的 DataTable，但如果有一个现有的 匹配选择器的DataTable，它将被销毁并 替换为新表。

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