发出多个 ajax 请求以填充 table 行。如何对 table 列进行排序？

Question

我正在使用 JQuery 发出多个 ajax 请求来填充 table 行。如何对 table 列进行排序。我正在使用第一个 API 来获取所有符号的值。第二个 API 用于查找该特定符号的值。这些值附加到 table 中。我想对 table 的列使用排序。 tablesorter() 是一个排序 table 不起作用的函数。这对于简单的 table 来说工作正常。这是我的代码。

<script type="text/javascript">


       
        // HTTPRequest
        var value = [];
        $.ajax({
            method: "GET",
            url: "https://api.binance.com/api/v1/exchangeInfo"
        })
        .done(function(data){

            
            data.symbols.forEach(function(element, index) {

             value[index] = element.symbol;
             $(".tablefriendsname").append("<tr><td>" + element.symbol + "</td></tr>");
             

                
                $.ajax({
                    method: "GET",

                    url: "https://api.binance.com/api/v1/ticker/24hr?symbol=" + data.symbols[index].symbol
                })
                .done(function(data2){
                
                    $(".tablefriendsname2").append("<tr><td>" + data2.priceChange + "</td></tr>");
                    $(".priceChangePercent").append("<tr><td>" + data2.priceChangePercent + "</td></tr>");
                    $(".weightedAvgPrice").append("<tr><td>" + data2.weightedAvgPrice + "</td></tr>");
                    $(".prevClosePrice").append("<tr><td>" + data2.prevClosePrice + "</td></tr>");
                    $(".lastPrice").append("<tr><td>" + data2.lastPrice + "</td></tr>");
                    $(".lastQty").append("<tr><td>" + data2.lastQty + "</td></tr>");
                    $(".bidPrice").append("<tr><td>" + data2.bidPrice + "</td></tr>");
                    $(".bidQty").append("<tr><td>" + data2.bidQty + "</td></tr>");
                    $(".askPrice").append("<tr><td>" + data2.askPrice + "</td></tr>");
                    $(".askQty").append("<tr><td>" + data2.askQty + "</td></tr>");
                    $(".openPrice").append("<tr><td>" + data2.openPrice + "</td></tr>");
                    $(".highPrice").append("<tr><td>" + data2.highPrice + "</td></tr>");
                    $(".lowPrice").append("<tr><td>" + data2.lowPrice + "</td></tr>");
                    $(".volume").append("<tr><td>" + data2.volume + "</td></tr>");
                    $(".quoteVolume").append("<tr><td>" + data2.quoteVolume + "</td></tr>");
                    $(".openTime").append("<tr><td>" + data2.openTime + "</td></tr>");
                    $(".closeTime").append("<tr><td>" + data2.closeTime + "</td></tr>");
                    $(".firstId").append("<tr><td>" + data2.firstId + "</td></tr>");
                    $(".lastId").append("<tr><td>" + data2.lastId + "</td></tr>");
                    $(".count").append("<tr><td>" + data2.count + "</td></tr>");
                    $('#myTable').trigger('update');
                    
                })  // closed Inner done
        })  // CLOSE FOREACh
        });   // CLOSE outer DONE

        <!-- Sorting Columns -->
$(document).ready(function() 
    { 
        $("#myTable").tablesorter();
    });

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.5/js/jquery.tablesorter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Crypto Api Fetch</title>
</head>
<body>

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th class="">symbol</th>
    <th class="">priceChangePercent</th> 
    <th class="">weightedAvgPrice</th> 
    <th class="">prevClosePrice</th> 
    <th class="">lastPrice</th> 
    <th class="">lastQty</th> 
    <th class="">bidPrice</th> 
    <th class="">bidQty</th> 
    <th class="">askPrice</th> 
    <th class="">askQty</th> 
    <th class="">openPrice</th> 
    <th class="">highPrice</th> 
    <th class="">lowPrice</th> 
    <th class="">volume</th> 
    <th class="">quoteVolume</th> 
    <th class="">openTime</th> 
    <th class="">closeTime</th> 
    <th class="">firstId</th> 
    <th class="">lastId</th> 
    <th class="">count</th> 
    
</tr> 
</thead> 
<tbody> 
<tr class="">
    <td class="tablefriendsname"></td>
    <td class="tablefriendsname2"></td>
    <td class="priceChangePercent"></td>
    <td class="weightedAvgPrice"></td>
    <td class="prevClosePrice"></td>
    <td class="lastPrice"></td>
    <td class="lastQty"></td>
    <td class="bidPrice"></td>
    <td class="bidQty"></td>
    <td class="askPrice"></td>
    <td class="askQty"></td>
    <td class="openPrice"></td>
    <td class="highPrice"></td>
    <td class="lowPrice"></td>
    <td class="volume"></td>
    <td class="quoteVolume"></td>
    <td class="openTime"></td>
    <td class="closeTime"></td>
    <td class="firstId"></td>
    <td class="lastId"></td>
    <td class="count"></td>
    
</tr>

</tbody> 
</table> 
</body>
</html>

Answer 1

首先加载 jQuery。

不要将行追加到单元格中；创建一个行字符串，添加每个单元格，然后将其附加到 table:

.done(function(data2){
  var tr = '<tr><td class="symbol">' + element.symbol + '</td>';
  // array of each table column in order
  ['priceChangePercent', ..., 'count'].forEach(item => {
    tr += '<td class="' + item + '">' + data2[item] + '</td>';
  });
  $('#mytable).append(tr).trigger('update');
});

发出多个 ajax 请求以填充 table 行。如何对 table 列进行排序？

Multiple ajax request is made to fill table rows. How to sort the table columns?

javascript

jquery

ajax

tablesorter