HTML table sorting

Question

So basically I'm running a mysql query that fetches data from my database and displays it in an easy-to-read layout for the user.

Name-----Address----Sales Person

You get the gist. Now I want the user to sort the html table by salesperson. How can I easily do this using a dropdown menu?

<code><div class='menu'>
  <ul>
    <li><a href='#'><span>Sales Person</span></a>
      <ul>
        <li><a href='#'><span>Melissa</span></a></li>
        <li><a href='#'><span>Justin</span></a></li>
        <li><a href='#'><span>Judy</span></a></li>
        <li><a href='#'><span>Skipper</span></a></li>
        <li><a href='#'><span>Alex</span></a></li>
      </ul>
    </li>
  </ul>
</div></code>

Answer 1

This is another library.

The changes that need to be made are -

1. Add sorting js
   

2. Add the class name sortable to the table.

Click on the table title to sort the table accordingly:

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

<table class="sortable">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:0001</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:0002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:0003</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:0004</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:0005</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

Answer 2

Check if you can use any of the JQuery plugins mentioned below. Simply fantastic, offers a wide range of working options and is less effort to integrate. :)

https://github.com/paulopmx/Flexigrid - Flexgrid
http://datatables.net/index - Data table.
https://github.com/tonytomov/jqGrid

If not, you need to have a link to the headers that call the server-side script to invoke the sort.