How to Sort Data of HTML Table Column using jQuery Tutorial

SloopNasty · 2025-02-27T03:12:15+0000

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"

>
<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 :)

Download

You must upgrade your account or reply in the thread to view the hidden content.

How to Sort Data of HTML Table Column using jQuery Tutorial

More options

SloopNasty

452,292

324,736

324,744