HTML table sort

Question

So basically I am running a mysql query that fetches data from my database and displays it in an easy to read layout for my users.

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

You get the gist. And now I want to let the user sort the html table by let's say sales person. How would I easily do that using a drop down menu?

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

Answer 1

Check if you could go with any of the below mentioned JQuery plugins. Simply awesome and provide wide range of options to work through, and less pains to integrate. :)

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

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

Answer 2

Here is another library.

Changes required are -

1. Add sorttable js
   

2. Add class name sortable to table.

Click the table headers 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>