dataTablesForEach data not getting binded in knockout js

Below is the code in HTML for data-bind in datatables using knockout.js

<tbody data-bind="dataTablesForEach: {data: listtoiterate, dataTableOptions: {
                   retrieve: true,
                   jQueryUI: true,
                   paging: true,
                   ordering: false,
                   dom: '<f<t>lip>'
       }
}">
<tr>
   <td>
     <div class="custom-control custom-checkbox custom-control-inline">
         <input type="checkbox" data-bind=""                                             
              class="custom-control-input" id="chk_edit_pos">
            <label class="custom-control-label"                                                  
                for="chk_edit_pos">
            </label>
    </div>
    <span data-bind="text: abcCritical"></span>
  </td>

But If I add a div tag, as shown below, on top of the datatable just to check the values, the values are shown clearly.

<div class="tab-pane" role="tabpanel" id="tab-manage-list-dummy"
                                        data-bind="foreach: listtoiterate">
                                        <div class="col-auto">
                                            <span class="badge badge-primary m-1" data-bind="text: abcCritical"></span>
                                            <span class="badge badge-primary m-1" data-bind="text: abcDate"></span>
                                        </div>
                                    </div>