刷新 DataTables 中的 KnockoutJS 数据答案

【问题标题】：Refresh KnockoutJS Data In DataTables刷新 DataTables 中的 KnockoutJS 数据
【发布时间】：2012-01-11 16:11:04
【问题描述】：

我有下表

<table class="datatable zebra-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Issue</th>
            <th></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: Publications">
        <tr>
            <td><span data-bind="text: Name" /></td>
            <td><span data-bind="text: IssueNumber" /></td>
            <td><button type="button" class="btn" data-bind="click: $parent.DeletePublication">Delete</button></td>
        </tr>    
    </tbody>
</table>

这是视图模型的 sn-p：

function EditReaderViewModel() {
    var self = this;

    self.Publications = ko.observableArray([]);

    self.OnAddPublicationSaveButtonClicked = function () {
        //.. code omitted.    
        self.Publications.push(new Publication(publication.value, publication.label, publication.issueNumber));
    };
};

}

以及绑定到表的 Publication 对象：

function Publication(id, name, issueNumber) {
    var self = this;

    self.Id = id;
    self.Name = name;
    self.IssueNumber = issueNumber;
    self.LoadedFromDatabase = false;
}

当数据第一次加载到表中时，数据表初始化例如

$(".datatable").dataTable({ // blahh });

一切正常 - 数据已加载到表中，排序和过滤正常等。

现在，当我在 viewmodel 中的 Publications 数组中添加一个新项目时，事情就崩溃了。例如，假设我最初在 Publications 数组中有 1 项，当我添加另一个项时，它将出现在表格中，直到我单击列标题进行排序。

似乎数据表在某个地方有自己的内部数据列表，其中不包括我创建的新出版物。

考虑到数据来自 KnockoutJS 视图模型，有人可以指导我如何重建数据表吗？

请注意，我看过这个绑定插件：

http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings/

问题是当我使用它时，我会收到错误消息，例如：

从第 0 行的数据源请求未知参数“0”。

编辑：

我正在查看代码，我认为我发现了问题。在 jQuery.DataTables.js 中有这个函数function _fnGetCellData( oSettings, iRow, iCol, sSpecific )

在那个函数中有这一行：

if ( (sData=oCol.fnGetData( oData )) === undefined )

依次调用：

function _fnGetObjectDataFn( mSource )

现在，在function _fnGetObjectDataFn( mSource ) 中有这样一段代码：

else
{
    /* Array or flat object mapping */
    return function (data) {
         return data[mSource];
    };
}

data 不是一个数组，它是一个 JSON 对象，这意味着上面的代码会失败（return data[mSource];）。

我真的不知道在这里做什么。

编辑 - 重要：

正如其中一位评论员所注意到的，我刚刚确认，访问

http://www.joshbuckley.co.uk/2011/07/knockout-js-datatable-bindings

将导致木马警告。所以请注意，这个 url 现在是一个很大的 NO-NO。

【问题讨论】：

这里有同样的问题。你找到解决办法了吗？
@Petter - 我找到了解决问题的方法，但它确实涉及从头开始重建数据表。基本上，表格 HTML 存储在部分视图中，每次我需要刷新数据时都会重新加载。每次重新加载时，我都会在该表上调用“.dataTable()”插件。是的，更新内容的方式有点冗长，但在 UI 级别上确实很快。没有真正的放缓。
FWIW - 当我尝试访问 joshbuckley 链接时，我收到了来自卡巴斯基的警告。 “恶意HTTP对象...检测到：木马程序：'HEUR:Trojan.Script.Iframer'（修改）”。
@mg1075 为警告干杯 - 我已更新我的问题文本以指出该网址不再安全。

标签： binding knockout.js datatables

【解决方案1】：

我知道这是一个较旧的帖子，但由于我在遇到相同问题时发现了它，所以我觉得有必要发布解决方案，以便其他人可以更快地找到它。

刷新表格时，您可以简单地.clear() 然后.destroy() 表格。之后，只需使用已知的 .DataTable() 重新初始化表即可

虽然这有点乱，因为你真的拆除了结构并重建它，它工作得非常顺利。

您只需添加一个布尔标识符，您在第一次初始化表时设置为 true。当然，您必须将 Table 绑定到一个变量，才能在 DOM 元素上使用 DataTable API 魔法。

    if (managementLoadedDone){
            userTable.clear();
            userTable.destroy();
        }

在表格中填写数据

    userTable = $("#userTable").DataTable({responsive: true});
            usersLoaded = true;

【讨论】：

【解决方案2】：

您提到您使用了数据表插件并收到“从第 0 行的数据源请求未知参数 '0'”错误。

在我之前使用没有淘汰插件的数据表的经验中，我只使用了比标题定义更多的列，反之亦然。您必须检查您的 tbody 和 thead 部分，并确保它们的大小相同。

或者您在初始化表格时可能正在使用“aoColumnDefs”选项。再次检查选项定义并确保您没有尝试到达未知列：

例如，如果您有这样的定义

"aoColumnDefs": [{
         "bSearchable": false,
         "bVisible": false,
         "aTargets": [0]
     }, {
         "bSortable": false,
         "bSearchable": false,
         "sWidth": "45px",
         "aTargets": [2]
     }]

如果您只有 2 个主题部分，则会出现该错误。因为您正在使用 aTargets 到达第三列：[2]

【讨论】：

为此干杯。我找到了一个解决方法，当我有更多时间时，我会在这里发布。基本上它涉及将表的数据加载为 ASP NET MVC 部分视图；然后我使用 jQuery 将该部分视图的 HTML 加载到我页面上的主表 div 中。然后我调用 DataTable 的 .dataTable() 方法重新初始化表。

【解决方案3】：

我遇到了与您在此处描述的类似的问题（并且在卡巴斯基警告之后没有任何探索“绑定”链接的意图，即使它真的很安全。）

稍微采用KnockoutJs - how to use datatables with existing bound table 建议的方法，我最终采取了一种方法，在该方法中，当在桌子上使用敲除时，我添加了敲除 if 语句来测试 observableArray 是否至少有一行数据。

<!-- if Publications.length() > 0 -->
<table class="datatable zebra-striped">
    <thead>
        <tr>
            <th>Name</th>
            <th>Issue</th>
        </tr>
    </thead>
    <tbody>
        <!-- ko foreach: Publications -->
        <tr>
            <td><span data-bind="text: Name" /></td>
            <td><span data-bind="text: IssueNumber" /></td>
        </tr>  <!-- /ko -->
    </tbody>
</table>
<!-- /ko -->

加载视图模型时，我调用了 dataTables 函数在我的 .ajax 成功函数中。

然后让它工作的另一部分是利用dataTables "bStateSave": true，这样我在刷新之前所做的任何排序都不会丢失。

【讨论】：