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

}

和出版物对象绑定到表格：

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

我知道这是一个较老的线程，但是当我遇到同样的问题时发现它，我觉得需要发布解决方案，以便其他人可以更快地找到它。

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

重新初始化表格

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

首次初始化表时，您只需添加一个设置为true的布尔标识符。当然，您必须将Table绑定到变量才能在DOM Element上运行DataTable API魔术。

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

在表格中填写数据

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

Answer 2

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

在我之前使用没有敲除插件的数据表的经验中，我只使用了比标题定义更多的列来获得此错误，反之亦然。你必须检查你的tbody和thead部分，并确保它们都是相同的大小。

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

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

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

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

Answer 3

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

关于这里建议的方法KnockoutJs - how to use datatables with existing bound table，我最后选择了一个路径，当在表上使用knockout时，我添加了一个knockout 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 -->

加载View Model时，我调用了dataTables函数在我的.ajax成功函数中。

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

在DataTables中刷新KnockoutJS数据

3 个答案: