Добавление bootstrap4 dataTable () в сценарий выбивания

Question

Я новичок в нокауте, но постепенно начинаю понимать синтаксис, однако пытаюсь добавить dataTable (4) bootstrap-4 в мой скрипт нокаута. Используя dataTable (), я пытаюсь добавить функцию сортировки в мою таблицу.

Я знаю, что я близко (я думаю? ...), но я знаю, что мой подход неверен. Проблема в том, что, хотя я могу добавить сортировку к своей таблице, как только я пытаюсь использовать функцию сортировки, таблица возвращает ноль строк. Я потратил несколько дней на различные подходы, но, похоже, у меня та же проблема.

Пожалуйста, смотрите мой HTML-скрипт ниже:

Библиотека

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.3.1/css/hopscotch.min.css" integrity="sha256-TeLQmKq1SPkxZHZiEL7G51dc9Z2qGVhFCtPJFc0GZE8=" crossorigin="anonymous" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/hopscotch/0.3.1/js/hopscotch.min.js" integrity="sha256-mIU46ujurciQFMEch7R3bxitEIo1hq0tRk5uVXvAF0A=" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-debug.js" integrity="sha256-M5ZomNNnrnEB2WjSbnty5GWGqq6UuAAVNnWECisgEis=" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js" integrity="sha256-gaGobNk1cPaj0abcVmyZxUYgCPsueCJwN5i4DjC4BS0=" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js" integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo=" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">  

   <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-bootstrap/0.2.1/knockout-bootstrap.js" crossorigin="anonymous"></script>

   <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

   <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

   <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>

HTML скрипт

  <table id="testtable" class="table table-hover table-striped table-bordered"  style="width:100%">
            <thead>
                <tr >
                    <th>Identifier</th>
                    <th>TestCol</th>
                     <th>TestCol2</th>
                </tr>
            </thead>            
            <tbody data-bind="foreach: { data:filteredItems, afterRender:highlight}">  
                <tr class="table-row" 
                    data-bind="click: $root.selectThing" 
                    onclick="highlight_row()">
                    <td>
                            <span data-bind="css: { 'fas fa-user':  attr_Identifier != '' }, style: { 'color': '#005EB8' }, attr: { 'title': attr_Identifier == '' ? '' : 'patient', 'aria-label': attr_Identifier == '' ? '' : 'patient' }"></span>                            
                            <span data-bind="text: attr_Identifier"></span>
                    </td>
                    <td> 
                        <a data-bind="attr: { href: url, title: details}">
                             <span data-bind="css: {'fas fa-book-medical': Care.TestCol}"></span>
                        </a>
                    </td>
                    <td data-bind="text: Care.TestCol2"></td>
                </tr>            
            </tbody>
        </table>

И мой javascript / нокаут js:

function highlight() {
    $('.table-row').hover(function() {             
        $(this).addClass('current-row');
    }, function() {
        $(this).removeClass('current-row');
    });           
};

function highlight_row() {
    var table = document.getElementById('WardAtAGlance');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        // Take each cell
        var cell = cells[i];
        // do something on onclick event for cell
        cell.onclick = function () {
            // Get the row id where the cell exists
            var rowId = this.parentNode.rowIndex;

            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = '#FFFF33';
            rowSelected.className += " selected";
        }
    }

};

$(document).ready(function() {

    var json;


    function wardModel() {

        var self = this;

        $('#testtable').DataTable(
            {
                paging: false,
                bFilter: false,
                bInfo: false,
                bsort: true,
                responsive: true,
            });

        self.records = ko.observableArray();
        self.CurrentDisplayThing = ko.observableArray();

        self.filters = ko.observableArray(['All Filters', 
                                            'Filter 1', 
                                            'Filter 2']);

                                            self.filter = ko.observable(['']); 
        self.search_ClientID = ko.observable(['']);

        self.filteredItems = ko.computed(function() {
            var filter = self.filter();
            var search = self.search_ClientID();
                  if (!search || !filter || (filter == "All Filters" && search == '')) {
                    return self.records();
                  }
                  else {
                    return ko.utils.arrayFilter(self.records(), function(i) {
                        return(
                            search == '' || i.attr_Identifier == search
                        ) &&
                            (
                            filter == "All Filters" || i.Care.TestCol2== filter
                            )
                    });
                  }
                });      

       $.ajax({
        type: "GET" ,
        url: "xml/aag_nb.xml" ,
        dataType: "xml" ,
        success: function(xml) {

            json = xml2json($(xml)[0],"");

             var dataFromServer = ko.utils.parseJson(json);
            self.records(dataFromServer.AAG.AtAGlanceFinal);
            self.CurrentDisplayThing.removeAll();
            self.CurrentDisplayThing.push((self.records()[0]));
}

    });

    }
    ko.applyBindings(new wardModel());

    self.selectThing = function(item) {
        CurrentDisplayThing.removeAll();
        self.CurrentDisplayThing.push(item);               
        };   

    self.url = ko.observable("https://www.google.com");
    self.details = ko.observable("TEST DISPLAY");


});

Мне просто нужно несколько советов о том, как правильно разместить мое размещение, в отношении добавления функции сортировки к моей таблице. Как мне убедиться, что данные все еще обрабатываются после сортировки таблицы?

Любая помощь будет оценена.