table sort

var headers = document.querySelectorAll("th");
for (var i = 0; i < headers.length; i++)
  headers[i].style.cursor = "pointer";

for (var j = 0; j < headers.length; j++)
{
    document.querySelectorAll("th")[j].setAttribute("data-index",j);
    document.querySelectorAll("th")[j].onclick = function(){
      var position = Number(this.getAttribute("data-index"));
      var arr = [];
      var nodeList = document.querySelectorAll("tbody tr");
      var parent = nodeList[0].parentNode;
      for(var i = 0; i < nodeList.length; i++) {
        arr.push(nodeList[i]);
        nodeList[i].parentNode.removeChild(nodeList[i])
      }
      arr.sort(function(a,b){
        var aval = a.querySelectorAll("td")[position].innerHTML + " " + a.querySelectorAll("td")[0].innerHTML;
        var bval = b.querySelectorAll("td")[position].innerHTML + " " + b.querySelectorAll("td")[0].innerHTML;

        return aval.localeCompare(bval);
      });
      for (var i = 0; i < headers.length; i++)
        if(this !== headers[i])
          headers[i].removeAttribute("data-sortorder");

      if (this.getAttribute("data-sortorder") === "asc")
      {
        arr.reverse();
        this.setAttribute("data-sortorder","desc");
      } else {
        this.setAttribute("data-sortorder","asc");
      }

      for(var i = 0; i < arr.length; i++) {
        parent.appendChild(arr[i]);
      }
    };
}