zyamly
Reconnaissance Expert
2
MONTHS
2 2 MONTHS OF SERVICE
LEVEL 1
300 XP
How to Sort Table Data Base on Age in JavaScript
Introduction
In this tutorial we will create a How to Sort Table Data Base on Age in JavaScript. This tutorial purpose is to teach you how to sort html table data base on age. This will cover all the basic function that will update your array data. I will provide a sample program to show the actual coding of this tutorial.
This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application that need to sort some data. I will give my best to provide you the easiest way of creating this program Sort HTML table data. So let's do the coding.
Before we get started:
This is the link for the template that i used for the layout design https://getbootstrap.com/.
Creating The Interface
This is where we will create a simple interface for our application. This code will display the buttons and tables with array object. To create this simply copy and write it into your text editor, then save it as index.html.
Creating JavaScript Function
This is where the main function of the application is. This code will dynamically sort the html data when the button is clicked. To do this just copy and write these block of codes inside the text editor and save it as script.js.
In the code above we will create a method that will sort the table data called filterAscending(). This function will sort the table data in ascending base on the age value. The code is consist of several conditional statement and loops. We use the sort() function to sort the data base on the argument you have been set, in my case we use age as an example.
Output:
The How to Sort Table Data Base on Age in JavaScript source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Sort Table Data Base on Age in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language
JavaScript Tutorials
Download
Introduction
In this tutorial we will create a How to Sort Table Data Base on Age in JavaScript. This tutorial purpose is to teach you how to sort html table data base on age. This will cover all the basic function that will update your array data. I will provide a sample program to show the actual coding of this tutorial.
This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system or application that need to sort some data. I will give my best to provide you the easiest way of creating this program Sort HTML table data. So let's do the coding.
Before we get started:
This is the link for the template that i used for the layout design https://getbootstrap.com/.
Creating The Interface
This is where we will create a simple interface for our application. This code will display the buttons and tables with array object. To create this simply copy and write it into your text editor, then save it as index.html.
- <!DOCTYPE html>
- <html
lang
=
"en"
>
- <head
>
- <meta
charset
=
"UTF-8"
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
/
>
- <link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"css/bootstrap.css"
/
>
- </
head
>
- <body
onload
=
"displayTable();"
>
- <nav
class
=
"navbar navbar-default"
>
- <div
class
=
"container-fluid"
>
- <a
class
=
"navbar-brand"
href
=
"https://sourcecodester.com"
>
Sourcecodester</
a
>
- </
div
>
- </
nav
>
- <div
class
=
"col-md-3"
></
div
>
- <div
class
=
"col-md-6 well"
>
- <h3
class
=
"text-primary"
>
How to Sort Table Data Base on Age</
h3
>
- <hr
style
=
"border-top:1px dotted #ccc;"
/
>
- <button
type
=
"button"
class
=
"btn btn-success"
onclick
=
"filterAscending()"
>
Ascending</
button
>
<button
type
=
"button"
class
=
"btn btn-success"
onclick
=
"filterDescending()"
>
Descending</
button
>
- <br
/
><br
/
>
- <table
class
=
"table table-bordered"
>
- <thead
class
=
"alert-info"
>
- <tr
>
- <th
>
Firstname</
th
>
- <th
>
Lastname</
th
>
- <th
>
Age</
th
>
- </
tr
>
- </
thead
>
- <tbody
id
=
"result"
style
=
"background-color:#fff;"
></
tbody
>
- </
table
>
- </
div
>
- </
body
>
- <script
src
=
"script.js"
></
script
>
- </
html
>
Creating JavaScript Function
This is where the main function of the application is. This code will dynamically sort the html data when the button is clicked. To do this just copy and write these block of codes inside the text editor and save it as script.js.
- var
names =
[
- {
"firstname"
:
"John"
,
"lastname"
:
"Smith"
,
"age"
:
"24"
}
,
- {
"firstname"
:
"Claire"
,
"lastname"
:
"Temple"
,
"age"
:
"18"
}
,
- {
"firstname"
:
"Steve"
,
"lastname"
:
"Anderson"
,
"age"
:
"39"
}
,
- {
"firstname"
:
"Paul"
,
"lastname"
:
"Spear"
,
"age"
:
"28"
}
,
- {
"firstname"
:
"Paula"
,
"lastname"
:
"Hope"
,
"age"
:
"20"
}
,
- ]
;
- function
displayTable(
)
{
- var
data =
""
;
- if
(
names.length
>
0
)
{
- for
(
var
i=
0
;
i <
names.length
;
i++
)
{
- data +=
"<tr>"
;
- data +=
"<td>"
+
names[
i]
.firstname
+
"</td>"
;
- data +=
"<td>"
+
names[
i]
.lastname
+
"</td>"
;
- data +=
"<td>"
+
names[
i]
.age
+
"</td>"
;
- data +=
"</tr>"
;
- }
- }
- document.getElementById
(
'result'
)
.innerHTML
=
data;
- }
- function
filterAscending(
)
{
- if
(
names.length
>
0
)
{
- var
sortArray =
names;
- sortArray.sort
(
function
(
a,
b)
{
- if
(
a.age
<
b.age
)
{
- return
-
1
;
- }
- if
(
a.age
>
b.age
)
{
- return
1
;
- }
- return
0
;
- }
)
;
- var
data =
""
;
- if
(
names.length
>
0
)
{
- for
(
var
i=
0
;
i <
names.length
;
i++
)
{
- data +=
"<tr>"
;
- data +=
"<td>"
+
names[
i]
.firstname
+
"</td>"
;
- data +=
"<td>"
+
names[
i]
.lastname
+
"</td>"
;
- data +=
"<td>"
+
names[
i]
.age
+
"</td>"
;
- data +=
"</tr>"
;
- }
- }
- document.getElementById
(
'result'
)
.innerHTML
=
data;
- }
- }
- function
filterDescending(
)
{
- if
(
names.length
>
0
)
{
- var
sortArray =
names;
- sortArray.sort
(
function
(
a,
b)
{
- if
(
a.age
>
b.age
)
{
- return
-
1
;
- }
- else
if
(
a.age
<
b.age
)
{
- return
1
;
- }
else
{
- return
0
;
- }
- }
)
;
- var
data =
""
;
- if
(
names.length
>
0
)
{
- for
(
var
i=
0
;
i <
names.length
;
i++
)
{
- data +=
"<tr>"
;
- data +=
"<td>"
+
names[
i]
.firstname
+
"</td>"
;
- data +=
"<td>"
+
names[
i]
.lastname
+
"</td>"
;
- data +=
"<td>"
+
names[
i]
.age
+
"</td>"
;
- data +=
"</tr>"
;
- }
- }
- document.getElementById
(
'result'
)
.innerHTML
=
data;
- }
- }
In the code above we will create a method that will sort the table data called filterAscending(). This function will sort the table data in ascending base on the age value. The code is consist of several conditional statement and loops. We use the sort() function to sort the data base on the argument you have been set, in my case we use age as an example.
Output:
The How to Sort Table Data Base on Age in JavaScript source code that I provide can be download below. Please kindly click the download button.
There you have it we successfully created How to Sort Table Data Base on Age in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!
More Tutorials for JavaScript Language
JavaScript Tutorials
Download
You must upgrade your account or reply in the thread to view hidden text.