根据列值动态排序和移动引导表行

如何解决根据列值动态排序和移动引导表行

我有一个如下的html

<table class="table" id="stock_list">
    <thead>
      <tr>
    <th>Symbol</th>
        <th>Stock Name</th>
        <th>Price</th>
        <th>Change %</th>
      </tr>
    </thead>
    <tbody>
        {% for stock in stocks %}
            <div id="accordion">
                  <tr data-toggle="modal" data-target=".bd-{{stock.identifier}}" class="stock-rows" id="{{stock.identifier}}" >
            <TD class="{{stock.identifier}}-c1">{{stock.identifier}}</TD>
                    <TD class="{{stock.identifier}}-c2">{{stock.name}}</TD>
                    <TD class="{{stock.identifier}}-c3">{{stock.price}}</TD>
                    <TD class="{{stock.identifier}}-c5"><SPAN>{{stock.change.percentage}}</SPAN></TD>
                  </tr>
            </div>
        {% endfor %}
    </tbody>
</table>

和连接到websocket并更新单元格值的Javascript

<script>
   var stock_quote_socket = 'ws://x.x.x.x:8777/';
   var ws = new WebSocket(stock_quote_socket);
      ws.onmessage = function (event) {
          var data = JSON.parse(event.data);
          quote = data.quote;
          if (quote){
            symbol = quote[0];
            stock_id = {{symbol_map|safe}}[symbol];
            var identifier = document.getElementsByClassName(stock_id + '-c1').item(0),price = document.getElementsByClassName(stock_id + '-c3').item(0),change_percentage = document.getElementsByClassName(stock_id + '-c5').item(0);
            if (identifier){
               price.innerHTML = quote[1];
               change_percentage.innerHTML = quote[2].percentage;
            }
          }
      };
      $(document).ready(function() {
           var dt_tbl = $('#stock_list').DataTable();
      });
</script>

当我单击Change %时，数据表将排序。我希望根据Change %列中到达/更新的值对表进行自动排序，并动态地将行移动到上方/下方。我可以知道如何实现这一目标。