'Code for Sorting first table column after page load not working - jQuery

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() }
javascripthtmljquery


Solution 1:[1]

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

HTML

<table class="table table-bordered table-hover sortable" sort-id="UV68">
    <thead class="thead-dark">
        <tr class="sorter_row">
            <th class="sorter" dir="-1">
                <span>
                    Col 1
                </span>
            </th>
            <th class="sorter active_up" dir="1">
                <span>
                    Col 2
                </span>
            </th>
            <th class="sorter" dir="-1">
                <span>
                    Col 3   
                </span>
            </th>
        </tr>
    </thead>

    <tbody class="sorted_part">
        <tr class="sorted_row">
            <td>
                <span class="sorted">
                    Alpha
                </span>
            </td>
            <td>
                <span class="table_user_id sorted">
                    1       
                </span>
            </td>
            <td>
                <span class="sorted" sort-value="11273.67">
                    3   
                </span>
            </td>
        </tr>
        
        <tr class="sorted_row">
            <td>
                <span class="sorted">
                    <a href="#" target="_blank">Beta </a>
                </span>
            </td>
            <td>
                <span class="table_user_id sorted">
                    2   
                </span>
            </td>
            <td>
                <span class="sorted" sort-value="5111">
                    2   
                </span>
            </td>
        </tr>
        
        <tr class="sorted_row">
            <td>
                <span class="sorted">
                    <a href="#" target="_blank">Gamma </a>
                </span>
            </td>
            <td>
                <span class="table_user_id sorted">
                    3   
                </span>
            </td>
            <td>
                <span class="sorted" 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]);
    }
});

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sputnik
Solution 2 Sputnik

Related Questions