Code for Sorting first table column after page load not working

I want the first header of the table sorted after page load. I am new to Javascript and jQuery and I am not fully understanding the code. So I don't know where in the code I can select the first header. So far it is not running. (interesting would also be to hide the table until it is sorted and then show it).

 <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

jQuery(document).ready(function() {

   sortLoad();

});

function sortLoad() {
    var table = jQuery('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer(jQuery(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i  ){table.append(rows[i])}
}
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return jQuery.isNumeric(valA) && jQuery.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return jQuery(row).children('td').eq(index).text() }

CodePudding user response：

I made a universal sorter for one project. It is working. I hope it will help you somehow.

HTML

<table  sort-id="UV68">
    <thead >
        <tr >
            <th  dir="-1">
                <span>
                    Col 1
                </span>
            </th>
            <th  dir="1">
                <span>
                    Col 2
                </span>
            </th>
            <th  dir="-1">
                <span>
                    Col 3   
                </span>
            </th>
        </tr>
    </thead>

    <tbody >
        <tr >
            <td>
                <span >
                    Alpha
                </span>
            </td>
            <td>
                <span >
                    1       
                </span>
            </td>
            <td>
                <span  sort-value="11273.67">
                    3   
                </span>
            </td>
        </tr>
        
        <tr >
            <td>
                <span >
                    <a href="#" target="_blank">Beta </a>
                </span>
            </td>
            <td>
                <span >
                    2   
                </span>
            </td>
            <td>
                <span  sort-value="5111">
                    2   
                </span>
            </td>
        </tr>
        
        <tr >
            <td>
                <span >
                    <a href="#" target="_blank">Gamma </a>
                </span>
            </td>
            <td>
                <span >
                    3   
                </span>
            </td>
            <td>
                <span  sort-value="0">
                    1               
                </span>
            </td>
        </tr>
    </tbody>
</table>

JS (jQuery)

$(document).on ("click", ".sortable .sorter", function () {
    var $me = $(this);
    var $table = $me.parents (".sortable");
    var tableIndex = $table.attr ("sort-id");
    var col = $me.index (".sortable[sort-id='"   tableIndex   "'] .sorter"); //Number ($me.attr("sorter-col"));
    var $rows = {};
    var values = {};
    var $sortedPart = $table.find (".sorted_part");
    var $sortedRows = $table.find (".sorted_row");
    var dir = $me.attr ("dir");
    var rowIndex = 1;
    var $row, $cell, rowValue, x, y, index, sorted;
    
    dir = (dir == 1 ? -1 : 1);

    $table.find (".sorter").removeClass ("active_up").removeClass ("active_down");
    $table.find (".sorter").attr ("dir", "-1");
    
    if (dir == 1) {
        $me.addClass ("active_up");
        $me.attr ("dir", "1");
    }
    else {
        $me.addClass ("active_down");
        $me.attr ("dir", "-1");
    }

    $sortedRows.each (function () {
        $row = $(this);
        $cell = $row.find(".sorted").eq(col);
        rowValue = $cell.attr ("sort-value");
        
        if (rowValue === undefined) {
            rowValue = $cell[0].innerText;
        }
        
        if (rowIndex !== undefined && rowValue !== undefined) {
            $rows[rowIndex] = $row;
            values[rowIndex] = rowValue;
        }
        
        rowIndex   ;
    });

    sorted = Object.entries (values).sort(function (a, b) {
        x = a[1];
        y = b[1];

        if (! isNaN (Number (x)) && ! isNaN (Number (y))) {
            return (x - y);
        }
        else {
            x = String (x).toLowerCase ();
            y = String (y).toLowerCase ();
            return (x < y ? -1 : x > y ? 1 : 0);
        }
    });
    
    $sortedRows.each (function () {
        $(this).remove ();
    });
    
    if (dir == -1) {
        sorted.reverse ();
    }
    
    for (i in sorted) {
        index = sorted[i][0];
        $sortedPart.append ($rows[index]);
    }
});

CodePudding user response：

Are there any errors in the console? Make sure that jquery.js is connected before your code.