1. Tutorials
  2. JavaScript Tutorial
  3. How to Sort Array Table with Options in JavaScript

How to Sort Array Table with Options in JavaScript

Submitted by razormist on Monday, February 20, 2023 - 22:09.

How to Sort Array Table with Options in JavaScript

Introduction

In this tutorial we will create a How to Sort Array Table with Options in JavaScript. This tutorial purpose is to teach you on how to manipulate an array in the html table. This will cover all the basic function that will sort the 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 uses array as your data provider. I will give my best to provide you the easiest way of creating this program Sort Array Table. 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 only html table and sort option. 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>
  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 Array Table with Options</h3>
  16.                 <hr style="border-top:1px dotted #ccc;"/>
  17.                 <div class="col-md-4">
  18.                 <form>
  19.                         <div class="form-group">
  20.                                 <h4>Sort Option</h4>
  21.                                 <select id="key" class="form-control">
  22.                                         <option value="firstname">Firstname</option>
  23.                                         <option value="lastname">Lastname</option>
  24.                                         <option value="age">Age</option>
  25.                                 </select>
  26.                                 <br />
  27.                                 <button type="button" class="btn btn-primary btn-block" onclick="sort();">Sort</button>
  28.                         </div>
  29.                 </form>
  30.                 </div>
  31.                 <div class="col-md-8">
  32.                         <table class="table table-bordered">
  33.                                 <thead class="alert-info">
  34.                                         <tr>
  35.                                                 <td>Firstname</td>
  36.                                                 <td>Lastname</td>
  37.                                                 <td>Address</td>
  38.                                         </tr>
  39.                                 </thead>
  40.                                 <tbody id="result" style="background-color:#fff;"></tbody>
  41.                         </table>
  42.                 </div>
  43.         </div>
  44. </body>
  45. <script src="script.js"></script>
  46. </html>

Creating JavaScript Function

This is where the main function of the application is. This code will sort your array in the html table when you selection a filter option. To do this just copy and write these block of codes inside the text editor and save it as script.js.
  1. let members = [
  2.                 {"firstname": "Steve", "lastname": "Roger", "age": "24"},
  3.                 {"firstname": "Bruce", "lastname": "Banner", "age": "32"},
  4.                 {"firstname": "Peter", "lastname": "Parker", "age": "19"},
  5.                 {"firstname": "Tony", "lastname": "Stark", "age": "35"}
  6. ];
  7.        
  8. function sort(){
  9.         let val=document.getElementById('key').value;
  10.        
  11.         switch(val){
  12.                 case"firstname":
  13.                         if(members.length > 0){
  14.                                 let sortArray = members;
  15.                                
  16.                                 sortArray.sort(function(a,b){
  17.                                         if(a.firstname < b.firstname){
  18.                                                 return -1;
  19.                                         }
  20.                                        
  21.                                         if(a.firstname > b.firstname){
  22.                                                 return 1;
  23.                                         }
  24.                                
  25.                                         return 0;
  26.                                 });
  27.                                
  28.                                
  29.                                 let data = "";
  30.                                
  31.                                 if(members.length > 0){
  32.                                         for(var i=0; i < members.length; i++){
  33.                                                 data += "<tr>";
  34.                                                 data += "<td>"+members[i].firstname +"</td>";
  35.                                                 data += "<td>"+members[i].lastname+"</td>";
  36.                                                 data += "<td>"+members[i].age+"</td>";
  37.                                                 data += "</tr>";
  38.                                         }
  39.                                 }
  40.                                
  41.                                 document.getElementById('result').innerHTML = data;
  42.                                
  43.                         }
  44.                 break;
  45.                 case"lastname":
  46.                         if(members.length > 0){
  47.                                 let sortArray = members;
  48.                                
  49.                                 sortArray.sort(function(a,b){
  50.                                         if(a.lastname < b.lastname){
  51.                                                 return -1;
  52.                                         }
  53.                                        
  54.                                         if(a.lastname > b.lastname){
  55.                                                 return 1;
  56.                                         }
  57.                                
  58.                                         return 0;
  59.                                 });
  60.                                
  61.                                
  62.                                 let data = "";
  63.                                
  64.                                 if(members.length > 0){
  65.                                         for(var i=0; i < members.length; i++){
  66.                                                 data += "<tr>";
  67.                                                 data += "<td>"+members[i].firstname +"</td>";
  68.                                                 data += "<td>"+members[i].lastname+"</td>";
  69.                                                 data += "<td>"+members[i].age+"</td>";
  70.                                                 data += "</tr>";
  71.                                         }
  72.                                 }
  73.                                
  74.                                 document.getElementById('result').innerHTML = data;
  75.                                
  76.                         }
  77.                 break;
  78.                 case"age":
  79.                         if(members.length > 0){
  80.                                 let sortArray = members;
  81.                                
  82.                                 sortArray.sort(function(a,b){
  83.                                         if(a.age < b.age){
  84.                                                 return -1;
  85.                                         }
  86.                                        
  87.                                         if(a.age > b.age){
  88.                                                 return 1;
  89.                                         }
  90.                                
  91.                                         return 0;
  92.                                 });
  93.                                
  94.                                
  95.                                 let data = "";
  96.                                
  97.                                 if(members.length > 0){
  98.                                         for(var i=0; i < members.length; i++){
  99.                                                 data += "<tr>";
  100.                                                 data += "<td>"+members[i].firstname +"</td>";
  101.                                                 data += "<td>"+members[i].lastname+"</td>";
  102.                                                 data += "<td>"+members[i].age+"</td>";
  103.                                                 data += "</tr>";
  104.                                         }
  105.                                 }
  106.                                
  107.                                 document.getElementById('result').innerHTML = data;
  108.                                
  109.                         }
  110.                 break;
  111.         }
  112. }
  113.  
  114. function displayData(){
  115.         let data = "";
  116.         if(members.length > 0){
  117.                 for(var i=0; i < members.length; i++){
  118.                         data += "<tr>";
  119.                         data += "<td>"+members[i].firstname +"</td>";
  120.                         data += "<td>"+members[i].lastname+"</td>";
  121.                         data += "<td>"+members[i].age+"</td>";
  122.                         data += "</tr>";
  123.                 }
  124.         }
  125.        
  126.         document.getElementById('result').innerHTML = data;
  127. }
  128.  
  129. displayData();
  130.        

In code above we first create an array object that contains the data we will be using, we will call this members(). Then we will create a method called sort(), this function is the one that make your array to sort the data in the table. In this function we use the switch statement to handle the sort option for our array. To sort our data we use the built-in JavaScript function called sort(). This function will sort our array object base on the parameter that have been set.

Output:

The How to Sort Array Table with Options 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 Array Table with Options 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

Tags
HTML
css
Javascript
Array
name sorter
Bootstrap

Add new comment

About text formats
  • 105 views