How to Sort Table Data Base on Age in JavaScript

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.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
  5. <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
  6. </head>
  7. <body onload="displayTable();">
  8. <nav class="navbar navbar-default">
  9. <div class="container-fluid">
  10. <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
  11. </div>
  12. </nav>
  13. <div class="col-md-3"></div>
  14. <div class="col-md-6 well">
  15. <h3 class="text-primary">How to Sort Table Data Base on Age</h3>
  16. <hr style="border-top:1px dotted #ccc;"/>
  17. <button type="button" class="btn btn-success" onclick="filterAscending()">Ascending</button> <button type="button" class="btn btn-success" onclick="filterDescending()">Descending</button>
  18. <br /><br />
  19. <table class="table table-bordered">
  20. <thead class="alert-info">
  21. <tr>
  22. <th>Firstname</th>
  23. <th>Lastname</th>
  24. <th>Age</th>
  25. </tr>
  26. </thead>
  27. <tbody id="result" style="background-color:#fff;"></tbody>
  28. </table>
  29. </div>
  30. </body>
  31. <script src="script.js"></script>
  32. </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.
  1. var names = [
  2. {"firstname":"John", "lastname":"Smith", "age":"24"},
  3. {"firstname":"Claire", "lastname":"Temple", "age":"18"},
  4. {"firstname":"Steve", "lastname":"Anderson", "age":"39"},
  5. {"firstname":"Paul", "lastname":"Spear", "age":"28"},
  6. {"firstname":"Paula", "lastname":"Hope", "age":"20"},
  7. ];
  8.  
  9.  
  10. function displayTable(){
  11. var data = "";
  12. if(names.length > 0){
  13. for(var i=0; i < names.length; i++){
  14. data += "<tr>";
  15. data += "<td>"+names[i].firstname +"</td>";
  16. data += "<td>"+names[i].lastname+"</td>";
  17. data += "<td>"+names[i].age+"</td>";
  18. data += "</tr>";
  19. }
  20. }
  21.  
  22. document.getElementById('result').innerHTML = data;
  23. }
  24.  
  25.  
  26. function filterAscending(){
  27. if(names.length > 0){
  28. var sortArray = names;
  29.  
  30. sortArray.sort(function(a,b){
  31. if(a.age < b.age){
  32. return -1;
  33. }
  34.  
  35. if(a.age > b.age){
  36. return 1;
  37. }
  38.  
  39. return 0;
  40. });
  41.  
  42.  
  43. var data = "";
  44.  
  45. if(names.length > 0){
  46. for(var i=0; i < names.length; i++){
  47. data += "<tr>";
  48. data += "<td>"+names[i].firstname +"</td>";
  49. data += "<td>"+names[i].lastname+"</td>";
  50. data += "<td>"+names[i].age+"</td>";
  51. data += "</tr>";
  52. }
  53. }
  54.  
  55. document.getElementById('result').innerHTML = data;
  56.  
  57. }
  58.  
  59. }
  60.  
  61. function filterDescending(){
  62. if(names.length > 0){
  63. var sortArray = names;
  64.  
  65. sortArray.sort(function(a,b){
  66. if(a.age > b.age){
  67. return -1;
  68. }
  69.  
  70. else if(a.age < b.age){
  71. return 1;
  72. }else{
  73. return 0;
  74. }
  75.  
  76.  
  77. });
  78.  
  79.  
  80. var data = "";
  81.  
  82. if(names.length > 0){
  83. for(var i=0; i < names.length; i++){
  84. data += "<tr>";
  85. data += "<td>"+names[i].firstname +"</td>";
  86. data += "<td>"+names[i].lastname+"</td>";
  87. data += "<td>"+names[i].age+"</td>";
  88. data += "</tr>";
  89. }
  90. }
  91.  
  92. document.getElementById('result').innerHTML = data;
  93.  
  94. }
  95. }

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

Add new comment