HTML table sort

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? This is what I have so far....I just don't really know how to tell the menu to sort the html table.

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

Any help is greatly appreciated.

Answers


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. :)

http://tablesorter.com/docs/ - Table Sorter. 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.


Another approach to sort HTML table. (based on W3.JS HTML Sort)

<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>

<table id="usersTable" class="w3-table-all">
  <tr>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Name</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Address</th>
    <th onclick="w3.sortHTML('#usersTable', '.item', 'td:nth-child(3)')" style="cursor:pointer">Sales Person</th>
  </tr>

  <tr class="item">
    <td>user:2911002</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:2201002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:2901092</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:2801002</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:2901009</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

Here is another library.

Changes required are - 1. Add sorttable js 2. Add class name sortable to table.

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

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:2911002</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr class="item">
    <td>user:2201002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr class="item">
    <td>user:2901092</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr class="item">
    <td>user:2801002</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr class="item">
    <td>user:2901009</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

Flexbox-based tables can easily be sorted by using flexbox property "order".

Read more on MDN.


Need Your Help

ufw Linux firewall difference between reject and deny

linux firewall

Using the uncomplicated firewall ufw, I can set ports/services to reject and deny.