JQuery DataTables + KnockOut（+ BootStrap）错误？

问题描述

我已经将一个KnockOut observableArray绑定到一个jQuery DataTable。当我向这个数组动态添加项目时，新的项目正确地在表中呈现，但是datatable本身的一些选项没有被刷新。寻呼机没有得到更新。此外，无数据可用消息也不会消失。

HTML：

 < table class =table table-条带id =tblSample> 
< thead> 
< tr> 
< th> Name< / th> 
< / tr> 
< / thead> 
 
< tbody data-bind =foreach：List> 
< tr> 
< td data-bind =text：Name>< / td> 
< / tr> 
< / tbody> 
< / table> 
< button class =btntype =buttondata-bind =click：AddSample> Test< / button> 
  

Knockout模型：

  var Sample = function（name）{
 this.Name = ko.observable（name）; 
}; 
 
 var ViewModel = function（）{
 var self = this; 
 self.List = ko.observableArray（）; 
 self.AddSample = function（）{
 self.List.push（new Sample（'New'））; 
}; 
}; 
 
 ko.applyBindings（new ViewModel（））; 
  

：$ {


$ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ）.dataTable（{
sDom：<'row'<'span6'l><'span6'f> r> t<'row'<'span6'i& 'b
bSort：
sPaginationType：bootstrap，
bFilter：true，
bLengthChange
iDisplayLength：15，
oLanguage：{
sLengthMenu：_MENU_ records per pagina
}
}）;
} ）;

工作JSFiddle：

我做错了，还是这个bug？

感谢
Nico

（编辑：jsfiddle中固定的CDN链接）

解决方案

有一个原生的淘汰网格叫做KoGrid

但是，如果你真的想使用Datatables，那么有一个准备去淘汰的绑定它（仅适用于1.9.0）

我已经在Github上分配了绑定，并扩展了一些（您可以从ViewModel访问Datables对象来刷新，过滤，排序，等等），你可以在这里找到

I have bound a KnockOut observableArray to a jQuery DataTable. When I dynamically add items to this array, the new items are correctly being rendered in the table, however some options of the datatable itself are not being refreshed. The pager doesn't get updated. Also the "no data available" message does not disappear.

HTML:

<table class="table table-striped" id="tblSample">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: List">
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>
<button class="btn" type="button" data-bind="click: AddSample">Test</button>

Knockout model:

var Sample = function(name) {
    this.Name = ko.observable(name);
};

var ViewModel = function() {
    var self = this;
    self.List = ko.observableArray();
    self.AddSample = function() {
        self.List.push(new Sample('New'));
    };
};

ko.applyBindings(new ViewModel());​

DOM ready:

$(document).ready(function() {

    $('#tblSample').dataTable({
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "bFilter": true,
        "bLengthChange": false,
        "bSort": true,
        "iDisplayLength": 15,
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per pagina"
        }
    });
});

Working JSFiddle: http://jsfiddle.net/PhpDk/1

Am I doing something wrong, or is this a bug?

Thanks,Nico

(edit: fixed CDN links in jsfiddle)

解决方案

There is a native knockout grid called KoGridhttps://github.com/ericmbarnard/KoGrid

But if you really want to use Datatables there is a ready to go knockout binding for it (It works with 1.9.0 only)

I have forked that binding on Github and extended it somewhat (You can access Datables object from ViewModel to refresh, filter, sort, etc), you can find it here

https://github.com/AndersMalmgren/Knockout.Extensions

这篇关于JQuery DataTables + KnockOut（+ BootStrap）错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！