Table Sorting

by phrontisteries

HTML

<table class="allowSort">
  <thead>
    <tr>
      <th>No.</th>
      <th>Name</th>
      <th>Belong</th>
      <th>Current Networth</th>
      <th>BirthDay</th>
      <th>Just Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Gwanshic Yi</td>
      <td>Gwanshic Home</td>
      <td>120000</td>
      <td>1982-03-20</td>
      <td>124,124,523</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Steve Jobs</td>
      <td>Apple</td>
      <td>19000000000</td>
      <td>1955-02-24</td>
      <td>194,523</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Bill Gates</td>
      <td>MicroSoft</td>
      <td>84300000000</td>
      <td>1955-10-28</td>
      <td>1,524,124,523</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Larry Page</td>
      <td>Googled</td>
      <td>39100000000</td>
      <td>1973-03-26</td>
      <td>11,124,523</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Larry Paged</td>
      <td>Google</td>
      <td>39100000000</td>
      <td>1973-03-26</td>
      <td>11,124,523</td>
    </tr>
  </tbody>
</table>

JavaScript

function createColumnTableHighlightingForThisManyRows(numberOfRows) {
  var styleSheetText = [];
  for (var i = 1; i < numberOfRows + 1; ++i) {
    styleSheetText.push('table.allowSort[lastSort="' + i + '"] td:nth-of-type(' + i + ') {background-color: green;}');
    styleSheetText.push('table.allowSort[lastSort="' + i + '"] th:nth-of-type(' + i + ')[sortAscending=false]:after {content:"\\25BC"}');
    styleSheetText.push('table.allowSort[lastSort="' + i + '"] th:nth-of-type(' + i + ')[sortAscending=true]:after {content:"\\25B2"}');
  }
  var styleSheet = document.createElement('style');
  styleSheet.innerHTML = styleSheetText.join(' ');
  document.head.appendChild(styleSheet)
}
var possibleColumns = Math.max(...Array.from(document.querySelectorAll("table.allowSort thead tr")).map(function(tr) {
  return Array.from(tr.children).length
}));
createColumnTableHighlightingForThisManyRows(possibleColumns);

function getParentTable(theTable) {
  while (theTable.nodeName !== 'TABLE') {
    theTable = theTable.parentElement
  }
  return theTable
}
var forEachTable = function(theTable) {
  var forEachHeader = function(th) {
    var tbody = theTable.querySelector("tbody");
    var rowSortWithIndex = function(a, b) {
      var a_val = a.children[th.cellIndex].innerText
      var b_val = b.children[th.cellIndex].innerText
      return (th.getAttribute("sortAscending") === "true") ? a_val.localeCompare(b_val) : b_val.localeCompare(a_val)
    }
    var thClick = function(e) {
      var sameColSorted = Number(theTable.getAttribute("lastSort")) === th.cellIndex + 1;
      if (sameColSorted && theTable.getAttribute("sortAscending") !== "false") {
        th.setAttribute("sortAscending", false)
      } else {
        th.setAttribute("sortAscending", true)
      }
      theTable.setAttribute("lastSort", th.cellIndex + 1);
      tbody.replaceChildren(...Array.from(tbody.children).sort(rowSortWithIndex))
    }
    th.addEventListener('click', thClick)
  }
 ...