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          


        

Answer 1

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

let tid = "#usersTable";
let headers = document.querySelectorAll(tid + " th");

// Sort the table element when clicking on the table headers
headers.forEach(function(element, i) {
  element.addEventListener("click", function() {
    w3.sortHTML(tid, ".item", "td:nth-child(" + (i + 1) + ")");
  });
});

th {
  cursor: pointer;
  background-color: coral;
}

Click the table headers to sort the table accordingly:


  
  

    
Name
    
Address
    
Sales Person
  

  

    
user:2911002
    
UK
    
Melissa
  
  

    
user:2201002
    
France
    
Justin
  
  

    
user:2901092
    
San Francisco
    
Judy
  
  

    
user:2801002
    
Canada
    
Skipper
  
  

    
user:2901009
    
Christchurch
    
Alex