在通过ajax调用更新行之后，使用jQuery对表进行排序

Question

我的网站有一个选举部分，我们在那里更新选举数字。以前，要查看新结果，必须刷新页面。

我有一个工作代码，它将请求一个带有活动数字的自定义rest API，并让jquery代码拉入数据，并使用新信息更新所需的表td，而无需刷新。不幸的是，当更新新数字时，此代码不会使用该表。

如果候选人a获胜，但ajax调用更新了数字，而现在候选人b获胜，我想对表格进行排序，使候选人a位于第一行。

我有一个正在工作的jsfiddle，将在下面发布我的代码。我尝试了各种不同的方法来在引入新数字的函数之后对表行进行排序，但都无济于事。

当用户单击复选框时，一个每隔1秒运行一次的函数(仅用于测试目的(。当用户取消选中代码时，请求停止。

我想在添加新数字后按百分比列进行排序。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" crossorigin="anonymous" />
<div class="custom-control custom-checkbox mt-2 ml-2">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Enable Live Results</label>
</div>
<table id="rprc" class="table table-bordered">
<caption class="ml-2 small">(I) = Incumbent - Green Highlight = Winner</caption>
<thead class="thead-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">Party</th>
<th scope="col">Votes</th>
<th scope="col">%</th>
</tr>
</thead>
<tbody>
<tr id="row-rprc-22938" class="small" data-percent="0">
<td class="font-weight-bold"><a href="https://www.bamapolitics.com/alabama/alabama-government-officials/profiles/jerry-carl/">Jerry Carl</a></td>
<td class="font-weight-bold">Republican</td>
<td id="rprc-22938" class="font-weight-bold">0</td>
<td id="rprc-22938-pct" class="font-weight-bold">0</td>
</tr>
<tr id="row-rprc-1359" class="small" data-percent="0">
<td><a href="https://www.bamapolitics.com/alabama/alabama-government-officials/profiles/bill-hightower/">Bill Hightower</a></td>
<td>Republican</td>
<td id="rprc-1359">0</td>
<td id="rprc-1359-pct">0</td>
</tr>
</tbody>
</table>

Javascript

var timeOut = '';
function getResults() {
jQuery.getJSON('https://www.bamapolitics.com/wp-json/elections/v1/election/33159', function(data) {
jQuery.each(data, function(i, value) {
jQuery('#' + value.id).text(value.votes);
jQuery('#' + value.id + '-pct').text(value.percent + '%');
jQuery('#row-' + value.id).attr('data-percent', value.percent);
});
});
timeOut = setTimeout(function() {
getResults();
}, 1000);
}
jQuery(function() {
jQuery("#customCheck1").click(function() {
if (jQuery(this).is(':checked')) {
timeOut = setTimeout(function() {
getResults();
}, 1000);
} else {
clearTimeout(timeOut);
}
});
});

JSFiddle

https://jsfiddle.net/BWBama85/xq08cmnb/1/

Answer 1

我能够使用jQuery tablersorter实现这一点，这很好，但我很想知道是否有一种更简单的方法不需要第三方扩展。

对于那些希望看到我的工作代码的人：

HTML

<div class="custom-control custom-checkbox mt-2 ml-2">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Enable Live Results</label>
</div>
<table id="rprc" class="table table-bordered tablesorter">
<caption class="ml-2 small">(I) = Incumbent - Green Highlight = Winner</caption>
<thead class="thead-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">Party</th>
<th scope="col">Votes</th>
<th scope="col">%</th>
</tr>
</thead>
<tbody>
<tr id="row-rprc-1359" class="small" data-percent="0">
<td><a href="https://www.bamapolitics.com/alabama/alabama-government-officials/profiles/bill-hightower/">Bill Hightower</a></td>
<td>Republican</td>
<td id="rprc-1359">1</td>
<td id="rprc-1359-pct">75%</td>
</tr>
<tr id="row-rprc-22938" class="small" data-percent="0">
<td><a href="https://www.bamapolitics.com/alabama/alabama-government-officials/profiles/jerry-carl/">Jerry Carl</a></td>
<td>Republican</td>
<td id="rprc-22938">2</td>
<td id="rprc-22938-pct">25%</td>
</tr>
</tbody>
</table>

Javascript

var timeOut = '';
jQuery(function() {
jQuery("#rprc").tablesorter({
sortList: [
[3, 1]
]
});
});
function getResults() {
jQuery.getJSON('https://www.bamapolitics.com/wp-json/elections/v1/election/33159', function(data) {
jQuery.each(data, function(i, value) {
jQuery('#' + value.id).text(value.votes);
jQuery('#' + value.id + '-pct').text(value.percent + '%');
});
jQuery('#rprc').trigger("update");
});
timeOut = setTimeout(function() {
getResults();
}, 10 * 1000);
}
jQuery(function() {
jQuery("#customCheck1").click(function() {
if (jQuery(this).is(':checked')) {
timeOut = setTimeout(function() {
getResults();
}, 10 * 1000);
} else {
clearTimeout(timeOut);
}
});
});

更新的JSFiddle

https://jsfiddle.net/BWBama85/xq08cmnb/20/