KnockoutJs - 如何使用带有现有绑定表的数据表 [英] KnockoutJs - how to use datatables with existing bound table

问题描述

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

当我点击标题时，表消失。任何想法我可以如何使用knockoutJS？

解决方案

实际上没有必要使用knockoutJ来执行dataTable的绑定。因为knockoutJ已经将HTML表绑定到模型，只需使用以下内容：

  $（function（）{
 var dtOptions = {
bPaginate：false，
bLengthChange：false，
bFilter：false，
bInfo：false，
 bJQueryUI： true 
} 
 
 var dt = $（＃leadsT​​able）。dataTable（dtOptions）; 
 
 $（＃searchButton）click（function ）{
 // ...设置搜索项的url ... 
 
 $ .get（url，function（data）{
 // destroy existing table 
 dt.fnDestroy（）; 
 
 ko.mapping.fromJS（data，vm.model）; 
 
 //重新创建在ko映射之后
 dt。 dataTable（dtOptions）; 
}）; 
}）
}）; 
 
 var serialisedModel = @ Html.Raw（new JavaScriptSerializer（）。Serialize（Model））; 
 
 var vm = {
 data：ko.toJSON（serialisedModel），
} 
 
 ko.applyBindings（vm）; 
  

关键部分是在映射之前销毁现有的dataTable，并在映射后重新创建。我不得不保留对初始dataTable的引用，以便以后破坏...

I have a simple HTML table which is bound using knockoutJS. However, I've added a custom binding which applies the jquery datatable plugin on the table.

When I click the headers, the table disappears. Any idea how I can get it working with knockoutJS?

解决方案

Its actually unnecessary to use knockoutJs to carry out the binding of the dataTable. As knockoutJs already binds the HTML table to the model, just use the following:

$(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);

The crucial part is to destroy the existing dataTable before the mapping, and re-create after mapping. I had to keep a reference to the initial dataTable for later destroying...

这篇关于KnockoutJs - 如何使用带有现有绑定表的数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！