binding - 刷新 DataTables 中的 KnockoutJS 数据

Question

我有下表

<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>

这是 View 模型的片段:

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

}

以及绑定(bind)到表的 Publication 对象:

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

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

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

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

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

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

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

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

请注意，我已经查看了这个绑定(bind)插件:

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

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

Requested unknown parameter '0' from the data source for row 0.

编辑:

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

在该函数中有这一行:

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

依次调用:

function _fnGetObjectDataFn( mSource )

现在，在函数_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

将导致特洛伊木马警告。所以请注意，这个网址现在是一个很大的禁忌。

Answer 1

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

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

重新初始化表即可

虽然这有点困惑，因为你确实拆除了结构并重建它，但它工作得非常顺利。

您只需添加一个在第一次初始化表时设置为 true 的 bool 标识符。当然，您必须将表绑定(bind)到变量才能在 DOM 元素上发挥 DataTable API 的魔力。

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

在表格中填写数据

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