按降序排序HTML表

Sort A HTML Table In Descending Order

本文关键字：HTML 排序 降序      更新时间：2023-09-26

我有一个HTML表，从我的数据库读取数据，但数据库中的条目不按顺序，我如何订购我的'Stock'列，使它们按字母顺序(a - z)

表的HTML在

下面
 <table class="table table-striped">
      <tr>
          <th style="padding-right: 10px;">Stock</th>
          <th style="width: 7%; padding-right: 10px;">SEDOL</th>
          <th style="width: 7%; padding-right: 10px;">Quantity</th>
          <th style="width: 7%; padding-right: 10px;">Value</th>
          <th style="width: 15%;" class="text-center">Actions</th>
     </tr>
     <% foreach (var stck in stocks) {%>
     <tr>
          <td style="vertical-align: middle"><%: stck.StockName%></td>
          <td style="vertical-align: middle"><%: stck.SEDOL%></td>
          <td style="vertical-align: middle"><%: stck.Quantity%></td>
          <td class="text-right" style="vertical-align: middle"><%: String.Format("{0:c}", stck.value)%></td>
          <td class="text-right">
               <%if (disinvestments.Find(x => x.Stock == stck.StockName) != null) {%>
               <button type="button" class="btn btn-default" disabled id="create_<%: stck.StockName%>" onclick="SetupDisinvestmentsFields(this,'<%=stck.SEDOL%>','<%=stck.Quantity%>','<%=stck.value%>')">
                    <span class="glyphicon glyphicon-plus"></span> Create
               </button>
               <%} else {%>
               <button type="button" class="btn btn-default" id="create_<%: stck.StockName%>" onclick="SetupDisinvestmentsFields(this,'<%=stck.SEDOL%>','<%=stck.Quantity%>','<%=stck.value%>')">
                    <span class="glyphicon glyphicon-plus"></span> Create
               </button>
               <%} %>
          </td>
    </tr>
    <% } %>
</table>

这可以在JavaScript, JQuery, HTML中完成，我不确定什么是最好的方法，因此我的问题

注:我不想把表改成webgrid或datatable

好的，所以你需要做的是在查询结束时添加一个order by Stockname DESC。

为什么不简单地写在DB查询?

我的意思是这样的:

"SELECT * FROM <table> WHERE <sequence> ORDER BY <parameter to order> ASC"

如果您坚持使用javascript/jquery进行排序，建议在服务器端排序(我也是):

  1. 获取除第一行以外的所有行，因为它是标题行。
  2. 从表中分离，转换到array
  3. 按Name列的文本排序
  4. 追加回表

var rows = $('table tr:not(:first)').detach().toArray();
rows.sort(function(rowA, rowB) {
    var textA = $(rowA).find('td:first').text();
    var textB = $(rowB).find('td:first').text();
    console.log(textA, textB);
    return textA < textB ? -1 : 1;
});
$('table').append(rows);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-striped">
      <tr>
          <th style="padding-right: 10px;">Stock</th>
          <th style="width: 7%; padding-right: 10px;">SEDOL</th>
          <th style="width: 7%; padding-right: 10px;">Quantity</th>
          <th style="width: 7%; padding-right: 10px;">Value</th>
     </tr>
      <tr>
          <td style="vertical-align: middle">CCC</td>
          <td style="vertical-align: middle">5</td>
          <td style="vertical-align: middle">6</td>
          <td class="text-right" style="vertical-align: middle">3</td>
    </tr>
     <tr>
          <td style="vertical-align: middle">AAA</td>
          <td style="vertical-align: middle">1</td>
          <td style="vertical-align: middle">2</td>
          <td class="text-right" style="vertical-align: middle">3</td>
    </tr>
      <tr>
          <td style="vertical-align: middle">BBB</td>
          <td style="vertical-align: middle">3</td>
          <td style="vertical-align: middle">4</td>
          <td class="text-right" style="vertical-align: middle">3</td>
    </tr>
     <tr>
          <td style="vertical-align: middle">ABC</td>
          <td style="vertical-align: middle">1</td>
          <td style="vertical-align: middle">2</td>
          <td class="text-right" style="vertical-align: middle">3</td>
    </tr>
</table>

当你从数据库 获取数据时，你需要添加Order子句。
select * from Table_Name order by Column_Name asc   // for accending order
select * from Table_Name order by Column_Name  desc   // for decending order

我建议您在select语句中使用"order by columnName desc"，因为表数据的排序将影响代码的性能

我能想到的两种方法:

  • 按顺序收集您的数据(ORDER BY - DESC或ASC在您的数据库中)
  • 使用一个表插件可以为你做这些。
相关文章：