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

以下是viewmodel的片段:

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

将导致特洛伊木马警告.所以请注意,这个网址现在是一个很大的NO-NO.

Answer 1

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

在我之前使用不带淘汰插件的数据表的经验中，我仅使用比标题定义更多的列时出现此错误，反之亦然。您必须检查您的身体和头部部分，并确保它们的尺寸相同。

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

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

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

如果你只有 2 个 head 部分，这会给你这个错误。因为您正在使用 aTargets 到达第三列：[2]