Javascript KnockoutJs-如何将数据表与现有绑定表一起使用

我有一个使用knockoutJS绑定的简单HTML表。但是，我添加了一个自定义绑定，它在表上应用jquery datatable插件

---

单击标题时，表格将消失。知道如何让它与knockoutJS一起工作吗？

实际上没有必要使用knockoutJS来执行数据表的绑定。由于knockoutJs已经将HTML表绑定到模型，只需使用以下命令：

$(function() {
        var dtOptions = {
                "bPaginate": false,
                "bLengthChange": false,
                "bFilter": false,
                "bInfo": false,
                bJQueryUI: true              
        }

        var dt = $("#leadsTable").dataTable(dtOptions);

        $("#searchButton").click(function() {
           //... set url with search terms...

           $.get(url, function (data) {
                // destroy existing table
                dt.fnDestroy();

                ko.mapping.fromJS(data, vm.model);

                // re-created AFTER ko mapping
                dt.dataTable(dtOptions);                    
           });
       })
});

var serialisedModel = @Html.Raw(new JavaScriptSerializer().Serialize(Model));

var vm = {      
    data: ko.toJSON(serialisedModel),
}

ko.applyBindings(vm);

---

关键部分是在映射之前销毁现有的数据表，并在映射之后重新创建。我必须保留对初始数据表的引用，以便以后销毁…

这是一种方法。。。我制作了一个JSFIDLE，展示了以下内容：

下面是一个用于jQuery数据表的淘汰定制绑定解决方案

ko.bindingHandlers.dataTablesForEach = {
page: 0,
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
  var options = ko.unwrap(valueAccessor());
  ko.unwrap(options.data);
  if(options.dataTableOptions.paging){
    valueAccessor().data.subscribe(function (changes) {
        var table = $(element).closest('table').DataTable();
        ko.bindingHandlers.dataTablesForEach.page = table.page();
        table.destroy();
    }, null, 'arrayChange');          
  }
    var nodes = Array.prototype.slice.call(element.childNodes, 0);
    ko.utils.arrayForEach(nodes, function (node) {
        if (node && node.nodeType !== 1) {
            node.parentNode.removeChild(node);  
        }
    });
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {        
    var options = ko.unwrap(valueAccessor()),
        key = 'DataTablesForEach_Initialized';
    ko.unwrap(options.data);
    var table;
    if(!options.dataTableOptions.paging){
      table = $(element).closest('table').DataTable();
        table.destroy();
    }
    ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
    table = $(element).closest('table').DataTable(options.dataTableOptions);
    if (options.dataTableOptions.paging) {
       if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) 
           table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);                
       else 
           table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);                
    }        
    if (!ko.utils.domData.get(element, key) && (options.data || options.length))
        ko.utils.domData.set(element, key, true);
    return { controlsDescendantBindings: true };
}}; 

---

如果你希望得到这方面的帮助，我想你需要提供一些代码。没关系，我想没关系。将dataTables与knockoutJs结合使用的大多数示例并不是逐步增强现有表。它们使用KnockoutJs将dataTables数据源附加到ajax端点。请参阅下面我的解决方案。