Merge pull request #107 from sejal-bansal/sorting

Added logic to sort the rating column
aditeyaS · Dec 7, 2023 · c01cdae · c01cdae
2 parents e4a0384 + 3957f13
commit c01cdae
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -66,11 +66,13 @@ <h1 class="ml11 title">
     </div>
 
     <div id="anime-data" class="tabcontent">
-      <table>
+      <table class="sortable-table">
         <thead>
           <tr>
             <td>Anime Name</td>
-            <td>Anime Rating</td>
+            <th class="sortable">Anime Rating
+              <span class="sort-arrow descending" style="font-size: 18px;">&#9660;</span>
+            </th>
             <td>Anime Link</td>
           </tr>
         </thead>
@@ -79,11 +81,13 @@ <h1 class="ml11 title">
     </div>
 
     <div id="movie-data" class="tabcontent">
-      <table>
+      <table class="sortable-table">
         <thead>
           <tr>
             <td>Movie Name</td>
-            <td>Movie Rating</td>
+            <th class="sortable">Movie Rating
+              <span class="sort-arrow descending" style="font-size: 18px;">&#9660;</span>
+            </th>
             <td>Movie Link</td>
           </tr>
         </thead>
@@ -92,11 +96,13 @@ <h1 class="ml11 title">
     </div>
 
     <div id="series-data" class="tabcontent">
-      <table>
+      <table class="sortable-table">
         <thead>
           <tr>
             <td>Series Name</td>
-            <td>Series Rating</td>
+            <th class="sortable">Series Rating
+              <span class="sort-arrow descending" style="font-size: 18px;">&#9660;</span>
+            </th>
             <td>Series Link</td>
           </tr>
         </thead>

diff --git a/index.js b/index.js
@@ -93,6 +93,41 @@ document.getElementById("backToTopBtn").onclick = function() {
   document.documentElement.scrollTop = 0; // for Chrome
 };
 
+// sorting table based on column index and order
+function sortTable(table, column, ascending = true) {
+    const dirModifier = ascending ? 1 : -1;
+    const tBody = table.tBodies[0];
+    const rows = Array.from(tBody.querySelectorAll("tr"));
+
+    const sortedRows = rows.sort((a, b) => {
+        const aColText = a.querySelector(`td:nth-child(${column + 1})`).textContent.trim();
+        const bColText = b.querySelector(`td:nth-child(${column + 1})`).textContent.trim();
+
+        return aColText.localeCompare(bColText, undefined, { numeric: true }) * dirModifier;
+    });
+
+    while (tBody.firstChild) {
+        tBody.removeChild(tBody.firstChild);
+    }
+
+    tBody.append(...sortedRows);
+
+    table.querySelectorAll("th").forEach(th => th.classList.remove("th-sort-asc", "th-sort-desc"));
+    table.querySelector(`th:nth-child(${column + 1})`).classList.toggle("th-sort-asc", ascending);
+    table.querySelector(`th:nth-child(${column + 1})`).classList.toggle("th-sort-desc", !ascending);
+}
+
+document.querySelectorAll(".sortable-table th").forEach(headerCell => {
+    headerCell.addEventListener("click", () => {
+        const tableElement = headerCell.parentElement.parentElement.parentElement;
+        const headerIndex = Array.prototype.indexOf.call(headerCell.parentNode.children, headerCell);
+        const currentIsAscending = headerCell.classList.contains("th-sort-asc");
+
+        sortTable(tableElement, headerIndex, !currentIsAscending);
+    });
+});
+
+
 // Populate tables
 function populateTable(tableId, data, linkPrefix) {
   const table = document.getElementById(tableId);