在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/