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

Posted 2023-02-21

【中文标题】通过ajax调用更新行后使用jQuery对表进行排序

【英文标题】：Sorting table with jQuery after rows are updated via ajax call

【发布时间】：2021-02-10 09:02:54

【问题描述】：

我网站的一部分有一个选举部分，我们会在其中更新选举编号。以前，要查看新结果，您必须刷新页面。

我的工作代码将请求一个带有实时数字的自定义休息 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/

【参考方案1】：

我能够使用 jQuery tablersorter 来解决这个问题，这很好，但我想知道是否有更简单的方法不需要 3rd 方扩展。

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

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/