javascript - 将 bootstrap4 dataTable() 添加到淘汰脚本

Question

我是淘汰赛新手，但慢慢开始理解语法，但是我在尝试将 bootstrap-4 dataTable() 添加到淘汰赛脚本时不知所措。使用 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/knockout 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");


});

我只需要一些关于如何让我的位置正确的指导，关于向我的表添加排序功能。一旦表格被排序，我如何确保数据仍在被拉出？

任何帮助，将不胜感激。

标签： javascriptjqueryhtmlknockout.jsbootstrap-4