在HTML表上用DataTables敲除

Question

我有一个可以正常工作的HTML表格而不是 DataTables。

但是，我想要实现DataTables，以便我可以使用过滤/搜索功能以及添加/删除列。

如何使用Knockout工作？

var ViewModel = function() { 
 

 
$('#myTable').DataTable({ 
 
     ajax: { 
 
      url: this.taskRecords() 
 
     } 
 
    }); 
 

 
this.taskRecords = ko.observableArray([ 
 
{ 
 
\t EntityCode: "name", 
 
    EntityName: "name desc23", 
 
    TagName: "L1", 
 
    TaskList: [ 
 
    \t { 
 
    \t TaskName: "TaskABC", 
 
     TaskRecordList: [ 
 
     \t { 
 
     \t StatusFlagName: "OK" 
 
     }, 
 
     { 
 
     \t StatusFlagName: "TEST" 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
    \t TaskName: "TaskDEF", 
 
     TaskRecordList: [ 
 
     \t { 
 
     \t StatusFlagName: "Error" 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
} 
 
]); 
 
    
 
}; 
 
ko.applyBindings(new ViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
     <table id="myTable" class="table table-hover table-bordered"> 
 
      <thead> 
 
       <tr> 
 
        <th>Entity Code</th> 
 
        <th>Entity name</th> 
 
        <th>Control Level</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody id="sortable" data-bind="foreach: taskRecords"> 
 
       <tr class="ui-state-default"> 
 
        <td class="ui-state-default" data-bind="text: EntityCode"></td> 
 
        <td class="ui-state-default" data-bind="text: EntityName"></td> 
 
        <td class="ui-state-default" data-bind="text: TagName"></td> 
 
        <!--ko foreach: TaskList--> 
 
        <td> 
 
         <div data-bind="text: TaskName"></div> 
 
         <table> 
 
          <tbody> 
 
           <!--ko foreach: TaskRecordList--> 
 
           <tr> 
 
            <td data-bind="text: StatusFlagName"></td> 
 
           </tr> 
 
           <!--/ko--> 
 
          </tbody> 
 
         </table> 
 
        </td> 
 
        <!--/ko--> 
 
       </tr> 
 
      </tbody> 
 
     </table>

Answer 1

问题

它看起来像你正试图将数据进行两次绑定：

1. 随着淘汰赛的HTML
2. 随着DataTable的AJAX网址

而且还有另一个问题：DataTable不喜欢添加没有相应标题的表列。

解决方案

我得到了它的两个改变工作：

一个。没有与DataTable的数据绑定，只需初始化：

$('#myTable').DataTable({ 
responsive: true 
}); 

b。添加<th>Tasks</th>表头

完整的解决方案：https://codepen.io/DonKarlssonSan/pen/mMVvME/