Sort Table by Selected Column

Answers: http://stackoverflow.com/questions/39396660/sort-table-in-jquery

by mjh42

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
<span>Column Number:&nbsp;</span><input type="text" id="columnNumber" style="width: 42px;">
<input type="button" id="btnSort1" value="Sort by Column" onclick="sortTableByColumnNumber($('table'), $('#columnNumber').val());" />
<table class="table table-bordered text-center">
    <thead>
    <tr>
        <th style="width: 200px;border-top: solid 1px rgba(255, 255, 255, 1);border-left: solid 1px rgba(255, 255, 255, 1);"></th>
        <th class="text-center yukiko-blue">Average</th>
        <th class="text-center">Baxter CDJR La Vista</th><th class="text-center">Baxter CDJR West Dodge</th><th class="text-center">Baxter Ford West Dodge</th><th class="text-center"> Legends Honda</th><th class="text-center"> Infiniti of Omaha</th><th class="text-center">Legends Toyota</th><th class="text-center"> Lexus of Lincoln</th><th class="text-center"> Lexus of Omaha</th><th class="text-center"> Mercedes-Benz of Omaha</th><th class="text-center">Baxter CDJR Lincoln</th><th class="text-center"> Baxter Ford South</th><th class="text-center">Baxter Toyota La Vista</th><th class="text-center">Baxter Toyota Lincoln</th><th class="text-center">Baxter VW La Vista</th><th class="text-center">Baxter CDJR Bellevue</th><th class="text-center"> Audi Omaha</th><th class="text-center"> Baxter Hyundai</th><th class="text-center"> Baxter Mazda</th><th class="text-center"> Baxter Subaru</th><th class="text-center">Baxter VW Westroads</th>                                         </tr>
    </thead>
    <tbody>
    <tr>
        <th scope="row">New Car Total Leads</th>
        <td...

JavaScript

function sortTableByColumnNumber($table, columnNumber) {
    var $table = $('table');

    transposeTable($table);

    // tinysort($('tr', $table), 'td:nth-of-type(' + columnNumber + ')'); // include "Average" column in sort
    tinysort($('tr', $table).slice(2), 'td:nth-of-type(' + columnNumber + ')'); // exclude "Average" column from sort

    transposeTable($table);

    $('tr:nth-of-type(' + columnNumber + ')').css('background-color', 'lightgreen').css('color', 'black'); // highlight sorted row

}

// source: http://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table
function transposeTable($table) {
    $table.each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td, th").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                if(i == 1)
                    newrows[i].append("<th>" + this.innerHTML  + "</th>");
                else
                    newrows[i].append("<td>" + this.innerHTML  + "</td>");
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
}

// http://stackoverflow.com/questions/7558182/sort-a-table-fast-by-its-first-column-with-javascript-or-jquery
function sortTable(tableId, columnNumber){
    var tbl = document.getElementById(tableId).tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];

        // var sortnr = parseFloat(row.cells[0].textContent || row.cells[0].innerText);
        // MOD: specify column number, and sort percentages by numberical value instead of by text value
        var sortnr = parseFloat(row.cells[columnNumber].textContent || row.cells[columnNumber].innerText).replace('%', '');

        if(!isNaN(sortnr)) store.push([sortnr,...