按降序对HTML表进行排序

Question

I have a HTML table which reads data from my DB but the enteries in the DB are not in order, how do i order my 'Stock' column so that they are in alphibetical order (AZ)

My HTML for my table is below

 <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>

Can this be done in JavaScript, JQuery, HTML, i'm not sure whats the best way to this hence my question

PS I dont want to have to change the table to a webgrid or datatable .

Answer 1

好的，实际上您需要做的是在查询末尾order by Stockname DESC添加order by Stockname DESC 。

Answer 2

Why are you not simply write it in DB Query?

I mean something like this:

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

Answer 3

you need to add Order clause when you are fetching data from database

select * from Table_Name order by Column_Name asc   // for accending order

select * from Table_Name order by Column_Name  desc   // for decending order

Answer 4

2 ways i can think of:

• collect your data ordered (ORDER BY - DESC or ASC in your DB)
• use a table plugin that can do that for you. Datatables plugin worked fine for me.

Answer 5

As there are many answers suggest order this at server-side(Me too), if you insist to sort it by javascript/ jquery:

1. Get all rows except first, as its a title row.
2. Detach from table, and covert to array
3. Sort by its Name column's text.
4. Append back to table.

 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> 

Answer 6

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