How to Sort Data of HTML Table Column using jQuery Tutorial

Submitted by oretnom23 on Friday, October 22, 2021 - 17:18.

In this tutorial, we will tackle about how to Sort the HTML Table Column Data using jQuery. Here, I will show how to create a custom JavaScript function that can sort each column in your HTML table. I will be providing a simple HTML Application Source code below which contains a sample HTML Table with Table sorting function. The sorting function will be triggered when the user clicks the column header. Each column header will have an arrow up icon if a user triggers the column to sort in ascending direction and an arrow down for descending direction.

Getting Started

In this tutorial, I used Bootstrap v5 for the design of application. And, kindly download also the jQuery Library. After that, compile you CSS and Script assets into a directory.

Creating the Interface

The script below the is the code for our Page Interface. This contains the table scripts. Save the script below as index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Sorting in PHP and jQuery</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- Custom CSS -->
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/script.js"></script>
    <style>
         :root {
            --bs-success-rgb: 71, 222, 152 !important;
        }
 
        html,
        body {
            height: 100%;
            width: 100%;
            font-family: Apple Chancery, cursive;
        }
        .fs-7 {
            font-size: .8rem!important;
        }
        #list-data th{
            cursor:pointer;
        }
        .sort-asc, .sort-desc{
            position:relative;
        }
        .sort-asc:before{
            position:absolute;
            content:"";
            top: 5px;
            left: -18px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 9px solid #646464;
        }
        .sort-desc:before{
            position:absolute;
            content:"";
            top: 5px;
            left: -18px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 9px solid #646464;
        }
    </style>
</head>
 
<body class="bg-light">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
        <div class="container">
            <a class="navbar-brand" href="https://sourcecodester.com">
            Sourcecodester
            </a>
        </div>
    </nav>
    <div class="container py-3" id="page-container">
        <small>How to sort Table Column Data using jQuery</small>
        <hr>
        <table class="table table-striped table-hover" id="list-data">
            <colgroup>
                <col width="10%">
                <col width="40%">
                <col width="20%">
                <col width="30%">
            </colgroup>
            <thead>
                <th class="py-1 px-2 text-center">#</th>
                <th class="py-1 px-2 text-center">Name</th>
                <th class="py-1 px-2 text-center">Number</th>
                <th class="py-1 px-2 text-center">Word</th>
            </thead>
            <tbody></tbody>
        </table>
    </div>
 
</body>
 
</html>

Creating the JSON File

Next, the following script is the JSON Data which is the source of data of our table. It will be fetched using Ajax Request when the page or window is ready. Save the file as data.json.

[{
        "name": "Aimee Hahn",
        "numberrange": 0,
        "text": "sit amet lorem semper auctor. Mauris vel turpis. Aliquam adipiscing"
    },
    {
        "name": "Otto Schultz",
        "numberrange": 3,
        "text": "et magnis dis parturient montes, nascetur ridiculus mus. Proin vel"
    },
    {
        "name": "Winifred Rush",
        "numberrange": 3,
        "text": "aliquet nec, imperdiet nec, leo. Morbi neque tellus, imperdiet non,"
    },
    {
        "name": "Brianna Gates",
        "numberrange": 5,
        "text": "Duis risus odio, auctor vitae, aliquet nec, imperdiet nec, leo."
    },
    {
        "name": "Stella Merritt",
        "numberrange": 5,
        "text": "cursus luctus, ipsum leo elementum sem, vitae aliquam eros turpis"
    },
    {
        "name": "Orson Rivas",
        "numberrange": "1",
        "text": "Morbi neque tellus, imperdiet non,"
    }, {
        "name": "Jessica Oliver",
        "numberrange": 9,
        "text": "Nulla facilisis. Suspendisse commodo tincidunt nibh. Phasellus nulla. Integer vulputate,"
    },
    {
        "name": "Fuller Mcdaniel",
        "numberrange": 2,
        "text": "at, iaculis quis, pede. Praesent eu dui. Cum sociis natoque"
    },
    {
        "name": "Magee Stark",
        "numberrange": 1,
        "text": "a feugiat tellus lorem eu metus. In lorem. Donec elementum,"
    },
    {
        "name": "Holly Small",
        "numberrange": 10,
        "text": "dui. Fusce aliquam, enim nec tempus scelerisque, lorem ipsum sodales"
    },
    {
        "name": "Karleigh Kelley",
        "numberrange": 9,
        "text": "nec orci. Donec nibh. Quisque nonummy ipsum non arcu. Vivamus"
    }, {
        "name": "Geoffrey Mays",
        "numberrange": 9,
        "text": "Nam tempor diam dictum sapien. Aenean massa. Integer vitae nibh."
    },
    {
        "name": "Hermione Brooks",
        "numberrange": 3,
        "text": "lectus. Nullam suscipit, est ac facilisis facilisis, magna tellus faucibus"
    },
    {
        "name": "Barry Johns",
        "numberrange": 3,
        "text": "leo elementum sem, vitae aliquam eros turpis non enim. Mauris"
    },
    {
        "name": "Hillary Aguilar",
        "numberrange": 4,
        "text": "lorem lorem, luctus ut, pellentesque eget, dictum placerat, augue. Sed"
    },
    {
        "name": "Quinlan Moss",
        "numberrange": 9,
        "text": "rutrum lorem ac risus. Morbi metus. Vivamus euismod urna. Nullam"
    }
]

Creating the Main Function

Lastly, the script below is the Custom JavaSript file for our application which contains the Jax Request Function for populating the Table rows and the sorting function. Save this file as script.js

$(function() {
    $.ajax({
        url: 'data.json',
        dataType: 'json',
        error: err => {
            console.log(err)
            alert("An error occured while loading the table data. Please refresh the page");
        },
        success: function(resp) {
            if (resp.length > 0) {
                var i = 1;
                Object.keys(resp).map(k => {
                    var data = resp[k]
                    var tr = $('<tr>')
                    tr.append('<td class="py-1 px-2 text-center">' + (i++) + '</td>')
                    tr.append('<td class="py-1 px-2">' + (data.name) + '</td>')
                    tr.append('<td class="py-1 px-2">' + (data.numberrange) + '</td>')
                    tr.append('<td class="py-1 px-2">' + (data.text) + '</td>')
                    $('#list-data tbody').append(tr)
                })
            }
        }
    })
    $('#list-data th').click(function() {
        var dir = $(this).attr('data-dir') || 'desc';
        dir = dir == 'desc' ? 'asc' : 'desc';
        $(this).attr('data-dir', dir)
        var dir_icon = '<span class="ms-4 fw-bold sort-' + dir + '"></span>'
        $('#list-data thead').find('.sort-asc').remove()
        $('#list-data thead').find('.sort-desc').remove()
        $(this).append(dir_icon)
        sort_element($(this).index(), dir)
    })
 
})
 
function sort_element(tbl_nth, dir) {
    tbl_nth = tbl_nth + 1
    var sorted = $($('#list-data tbody tr td:nth-child(' + tbl_nth + ')').toArray().sort(function(a, b) {
            var Aelement = a.innerText,
                Belement = b.innerText;
            if ($.isNumeric(Aelement) && $.isNumeric(Belement)) {
                if (dir == 'asc')
                    return Aelement - Belement;
                else
                    return Belement - Aelement;
            } else {
                if (dir == 'asc')
                    return Aelement.localeCompare(Belement)
                else
                    return Belement.localeCompare(Aelement)
            }
 
        }))
        // console.log(sorted)
 
    Object.keys(sorted).map(k => {
        $(sorted[k]).closest('tr').detach().appendTo('#list-data tbody')
    })
}

There you go! You can now test the simple Web Application which has an HTML Table with Column Sorting Functionality on your end. Browse the index.html in your browser and see if it is working according to plan. If you have encountered an error, kindly review your source code or download the working source code I created for this tutorial. The download button is located below this article.

DEMO VIDEO

That's the end of this tutorial. I hope this tutorial will help you and your future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Add new comment

1988 views