Sort table columns using array representation of column data!

by lasha

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<button class="sortCells">Sort All Columns</button>
<table class="tftable" border="1">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
            <th>Header 4</th>
            <th>Header 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-value="2.6" data-name="Row:2 Cell:1">Row:2 Cell:1</td>
            <td data-value="2.7" data-name="Row:2 Cell:2">Row:2 Cell:2</td>
            <td data-value="1.3" data-name="Row:1 Cell:3">Row:1 Cell:3</td>
            <td data-value="1.4" data-name="Row:1 Cell:4">Row:1 Cell:4</td>
            <td data-value="1.5" data-name="Row:1 Cell:5">Row:1 Cell:5</td>
        </tr>
        <tr>
            <td data-value="4.16" data-name="Row:4 Cell:1">Row:4 Cell:1</td>
            <td data-value="1.2" data-name="Row:1 Cell:2">Row:1 Cell:2</td>
            <td data-value="2.8" data-name="Row:2 Cell:3">Row:2 Cell:3</td>
            <td data-value="2.9" data-name="Row:2 Cell:4">Row:2 Cell:4</td>
            <td data-value="2.10" data-name="Row:2 Cell:5">Row:2 Cell:5</td>
        </tr>
        <tr>
            <td data-value="5.21" data-name="Row:5 Cell:1">Row:5 Cell:1</td>
            <td data-value="5.22" data-name="Row:5 Cell:2">Row:5 Cell:2</td>
            <td data-value="3.13" data-name="Row:3 Cell:3">Row:3 Cell:3</td>
            <td data-value="3.14" data-name="Row:3 Cell:4">Row:3 Cell:4</td>
            <td data-value="3.15" data-name="Row:3 Cell:5">Row:3 Cell:5</td>
        </tr>
        <tr>
            <td data-value="1.1" data-name="Row:1 Cell:1">Row:1 Cell:1</td>
            <td data-value="4.17" data-name="Row:4 Cell:2">Row:4 Cell:2</td>
            <td data-value="4.18" data-name="Row:4 Cell:3">Row:4 Cell:3</td>
            <td data-value="4.19" data-name="Row:4 Cell:4">Row:4 Cell:4</td>
            <td data-value="4.20" data-name="Row:4 Cell:5">Row:4 Cell:5</td>
     ...

JavaScript

//$(function(){
    var $cols = $("thead").find("tr").children();
    var colCount = $cols.length;
    var $rows = $("tbody").children();
    var rowCount = $rows.length;
    
    var colsArray = [];
    
    for(var i = 0; i < colCount; i++){
        colsArray[i] = [];
        
        
        $rows.each(function(index, el){
            var $this = $(this);
            var $currentCols = $this.children();
            
            colsArray[i].push({
                "val": $currentCols.eq(i).data("value"),
                "name": $currentCols.eq(i).data("name"),
                "textval": $currentCols.eq(i).text()
            });
        });
    }
    
    console.log(colsArray);
    
    var sortedCols;
    $(".sortCells").on("click",function(e){
        sortedCols = [];
        
        $cols.each(function(i, el){
            var sortedCol = colsArray[i].sort(function(obj1, obj2) {
                return obj1.val - obj2.val;
            });
            
            sortedCols.push(sortedCol);
        });
        
        console.log("sortedCols", sortedCols);
        
        // After everything has been sorted, run a similar for loop as we did in the beginning to iterate through all the cols and rows to REINJECT newly formatted data.
        for(var i = 0; i < colCount; i++){
            console.log("second loop", i);
            $rows.each(function(index, el){
                console.log("second loop row", index);
                var $this = $(this);
                var $currentCols = $this.children();
                var $currentCol = $currentCols.eq(i);
                
                $currentCol.attr("data-value", sortedCols[i][index].val);
                $currentCol.attr("data-name", sortedCols[i][index].name);
                $currentCol.text(sortedCols[i][index].textval);
            });
        }

    });



//});