FORK Table control Sort

by Chance Nursey-Bush

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-striped" id="myTable">
  <thead>
    <tr name="noexport">
      <th colspan=3 style="text-align:center">
        <span>Database Name</span>
        <span style="float:right"><button class="btn btn-default btn-xs" id="btnFoldTable" data-toggle="collapse" data-target=".collapse">-</button></span>
      </th>
    </tr>
    <tr class="collapse in" name="noexport">
      <th colspan=3>
        <span>
        <input class="btn btn-default btn-xs" type="button" value="Export" style="float:left" id="export">
        <input type="text" placeholder="Search" id="inputSearch" style="float:right">
        </span>
      </th>
    </tr>
    <tr class="collapse in" id="headerRow">
      <th onclick="sort(0, this)">Col1&nbsp;<span><button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-filter"></span></button>
        </span>
      </th>
      <th onclick="sort(1, this)">Col2&nbsp;<span><button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-filter"></span></button>
        </span>
      </th>
      <th onclick="sort(2, this)">Col3&nbsp;<span><button class="btn btn-default btn-xs" type="button"><span class="glyphicon glyphicon-filter"></span></button>
        </span>
      </th>
    </tr>
  </thead>
  
  <tbody class="collapse in">
    <tr class="searchC sortC">
      <td>char1</td>
      <td>1</td>
      <td>1char3</td>
    </tr>
    <tr class="searchC sortC">
      <td>char2</td>
      <td>2</td>
      <td>2char1</td>
    </tr>
    <tr class="searchC sortC">
      <td>char3</td>
      <td>3</td>
      <td>3char2</td>
    </tr>
  </tbody>
  <tfoot class="collapse in">
    <tr...

JavaScript

function sort(n, _this){
//remove other carets
var headerRow = document.getElementById("headerRow");
var headerRowElements = headerRow.getElementsByTagName("th");
for(var h = 0; h < headerRowElements.length; ++h){
	if(headerRowElements[h].innerHTML.charAt(0) !="C") 	headerRowElements[h].innerHTML = headerRowElements[h].innerHTML.substr(1);
}
	var table, rows, switching, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    //rows = table.getElementsByTagName("TR");
    rows = table.getElementsByClassName("searchC");
    if(!rows) return;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (var i = 0; i < rows.length - 1; i++) {
    
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n]; 
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if(!x || !y) return;
      if (dir == "asc") {
        
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i +...