How To Sort Table In Numerical Order Using JavaScript

admin_img Posted By Bajarangi soft , Posted On 05-10-2020

In Java script we can sort table data in numerical order so today we are going to discuss how to sort table data in numerical order using java script

How To Sort Table In Numerical Order Using JavaScript

Creating a Sort Function
Step 1:
 Create index.html file and implement below code in it.

<button class="btn btn-success" onclick="sortTable()">Sort</button>

<table id="Table">
    <tr>
        <th>ID</th>
        <th>Name</th>
    </tr>
    <tr>
        <td>5</td>
        <td>Berglunds snabbkop</td>
    </tr>
    <tr>
        <td>3</td>
        <td>North/South</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Alfreds Futterkiste</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Koniglich Essen</td>
    </tr>
    <tr>
        <td>1</td>
        <td>Magazzini Alimentari Riuniti</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Paris specialites</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Island Trading</td>
    </tr>

</table>


Step 2:Now we create css code for table so implement below code in index.html file
<style>
    h1 {
        color: red;
    }

    table {
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    th, td {
        text-align: left;
        padding: 13px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
</style>


Step 3:Now we implement javascript to sort data in numerical order.
<script>
    function sortTable() {
        var table, rows, switching, i, x, y, shouldSwitch;
        table = document.getElementById("Table");
        switching = true;
        /*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.rows;
            /*Loop through all table rows (except the
            first, which contains table headers):*/
            for (i = 1; 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")[0];
                y = rows[i + 1].getElementsByTagName("TD")[0];
                //check if the two rows should switch place:
                if (Number(x.innerHTML) > Number(y.innerHTML)) {
                    //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 + 1], rows[i]);
                switching = true;
            }
        }
    }
</script>


Complete code for sorting table data in numerical using java script
<!DOCTYPE html>
<html>
<head>
    <title> How To Sort Table In Numerical Order Using JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1 {
        color: red;
    }

    table {
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    th, td {
        text-align: left;
        padding: 13px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
</style>

<body>
<div class="container">
    <br>
    <br>
    <div class="text-center">
        <h1> How To Sort Table In Numerical Order Using JavaScript</h1>
    </div>
    <br>
    <div class="well">
        <button class="btn btn-success" onclick="sortTable()">Sort</button>

        <table id="Table">
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
            <tr>
                <td>5</td>
                <td>Berglunds snabbkop</td>
            </tr>
            <tr>
                <td>3</td>
                <td>North/South</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Alfreds Futterkiste</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Koniglich Essen</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Magazzini Alimentari Riuniti</td>
            </tr>
            <tr>
                <td>7</td>
                <td>Paris specialites</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Island Trading</td>
            </tr>

        </table>
        <script>
            function sortTable() {
                var table, rows, switching, i, x, y, shouldSwitch;
                table = document.getElementById("Table");
                switching = true;
                /*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.rows;
                    /*Loop through all table rows (except the
                    first, which contains table headers):*/
                    for (i = 1; 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")[0];
                        y = rows[i + 1].getElementsByTagName("TD")[0];
                        //check if the two rows should switch place:
                        if (Number(x.innerHTML) > Number(y.innerHTML)) {
                            //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 + 1], rows[i]);
                        switching = true;
                    }
                }
            }
        </script>
    </div>
    <div>
</body>
</html>

 

Related Post