刷新数据表中的KnockoutJS数据 [英] Refresh KnockoutJS Data In DataTables
问题描述
我有下表
<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的代码段:
Here is a snippet of the 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));
};
};
}
并将发布对象绑定到表:
and the Publication object binded to the table:
function Publication(id, name, issueNumber) {
var self = this;
self.Id = id;
self.Name = name;
self.IssueNumber = issueNumber;
self.LoadedFromDatabase = false;
}
首先将数据加载到表中，然后对数据表进行初始化，例如
When the data is first loaded into the table, and the datatable initialisation e.g.
$(".datatable").dataTable({ // blahh });
一切正常-数据已加载到表中，排序和过滤工作正常，等等.
Everything works fine - the data is loaded in the table, sorting and filtering is working, etc.
现在，当我将新项目添加到viewmodel的Publications数组中时，事情就分崩离析了.例如，假设我最初在Publications数组中有1个项目，当我添加另一个项目时，该项目将出现在表格中，直到单击列标题进行排序为止.
Now when I add a new item to the Publications array in the viewmodel things just fall apart. For example, say I originally have 1 item in the Publications array, when I add another item, it will appear in the table until I click on a column heading to sort.
数据表似乎在某个地方拥有自己的内部数据列表，其中不包括我创建的新出版物.
It seems that the datatable has it's own internal data list somewhere which does not include the new Publication I created.
考虑到数据来自KnockoutJS视图模型，有人可以指导我如何重建数据表吗?
Can someone guide me on how to rebuild the datatable, taking into account that the data is from a KnockoutJS viewmodel?
请注意，我已经查看了此绑定插件:
Please note that I have looked at this binding plugin:
http://www.joshbuckley.co.uk/2011/07/Knockout-js-datatable-bindings/
问题是，当我使用此功能时，会收到诸如以下的错误消息:
The problem is that when I use this, I get error messages such as:
从数据源请求第0行的未知参数'0'.
Requested unknown parameter '0' from the data source for row 0.
我正在查看代码，我认为我看到了问题.在jQuery.DataTables.js中有此功能function _fnGetCellData( oSettings, iRow, iCol, sSpecific )
I'm looking through the code and I think I see the problem. In jQuery.DataTables.js there is this function function _fnGetCellData( oSettings, iRow, iCol, sSpecific )
在该函数中有以下行:
if ( (sData=oCol.fnGetData( oData )) === undefined )
依次调用:
function _fnGetObjectDataFn( mSource )
现在，在function _fnGetObjectDataFn( mSource )中有这样的代码，称为:
Now, in function _fnGetObjectDataFn( mSource ) there is this code which is called:
else
{
/* Array or flat object mapping */
return function (data) {
return data[mSource];
};
}
data不是数组，它是一个JSON对象，这意味着上面的代码将失败(return data[mSource];).
data is not an array, it's a JSON object which means that the above code will fail (return data[mSource];).
我真的不确定在这里做什么.
I'm really not sure what to do here.
编辑-重要提示:
正如其中一位评论员所注意到的，我已经确认，可以访问
As one of the commentators has noticed, and I've just confirmed, accessing
http://www.joshbuckley.co.uk/2011/07/knockout -js-datatable-bindings
将导致木马警告.因此请注意，此网址现在是一个很大的限制.
will result in a Trojan warning. So please be aware that this url is now an big NO-NO.
推荐答案
我知道这是一个较旧的线程，但是由于我在遇到相同问题时找到了它，因此我觉得有必要发布解决方案，以便其他人可以更快地找到它
I know that´s an older thread but since I found it when I had the same problem I feel the need to post the solution so others might find it quicker.
刷新表时，可以先简化.clear()，再简化.destroy()表.
之后，只需使用已知的.DataTable()
When refreshing the Table you can simple .clear() and then .destroy() the table.
After that just reinitialize the table using the already known .DataTable()
尽管有点混乱，因为您确实拆除了结构并对其进行了重建，使其运行非常顺利.
Although that's a little messy because you really tear down the structure and rebuild it it work very smoothly.
您只需要添加一个布尔标识符，就可以在第一次初始化表时将其设置为true.当然，您必须将Table绑定到变量，才能在DOM元素上使用DataTable API魔术.
You just have to add a boolean identifier you set to true the first time you initialize the table. And of course you have to bind the Table to a variable to be able to work the DataTable API magic on the DOM Element.
if (managementLoadedDone){
userTable.clear();
userTable.destroy();
}
填写表格中的数据
userTable = $("#userTable").DataTable({responsive: true});
usersLoaded = true;
这篇关于刷新数据表中的KnockoutJS数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
