HTMLテーブルのDataTableノックアウト

Question

DataTablesのないのHTMLテーブルがあります。

ただし、フィルタリング/検索機能を使用して列を追加/削除できるように、DataTableを実装したいと考えています。

ノックアウトとはどのように機能しますか？

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

問題

あなたは2倍のデータをバインドしようとしているように見えます：

1. ノックアウトでHTML
2. 内のDataTableのAjax URL
付き

また、別の問題があります。DataTableは、対応するヘッダーのないテーブル列を追加することを好まない。

：

ソリューションは、私はそれが2回の変更で動作するようになりました。 DataTableとのデータバインディングはありません。

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

b。テーブルヘッダに<th>Tasks</th>を追加

完全なソリューション：https://codepen.io/DonKarlssonSan/pen/mMVvME/