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 (A-Z)

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

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

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 (A-Z)

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

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

• javascript
• jquery
• html

• you need to provide the rendered html... Not this one.. – Anoop Joshi P Commented Jul 16, 2015 at 9:12
• 1 Apparently you use smarty (and so php). Why not sorting in php ? – ben Commented Jul 16, 2015 at 9:12
• list.js is good for front-end sorting – royhowie Commented Jul 16, 2015 at 9:19
• @royhowie - There's no need for a plugin! It can be done with a simple order by COLLUMN DESC at the end of your query. – James111 Commented Jul 16, 2015 at 10:05
• @James111 unless you want the user to be able to click columns to sort the data accordingly, which is potentially much faster than repeatedly querying the database. – royhowie Commented Jul 16, 2015 at 10:10

6 Answers 6

Ok so what you would need to do is actually add an order by Stockname DESC at the end of your query.

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"

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

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

I remend you to use "order by columnName desc" in you select statement , because of the sorting of table data will affect the performance of your code

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.