我是淘汰赛的新手，但是慢慢地开始了解语法，但是在尝试向我的淘汰赛脚本中添加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");
});
关于向表中添加排序功能，我只需要一些有关如何正确放置的指导。表格排序后，如何确保仍在提取数据？
任何帮助将不胜感激。