Use jQuery TableSorter for sorting tables

albert-github · Sep 25, 2024 · 58cf16d · 58cf16d
1 parent de1872f
commit 58cf16d
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 53 deletions.
diff --git a/Maintenance/test_handling/Summary_Script.js b/Maintenance/test_handling/Summary_Script.js
@@ -179,23 +179,25 @@ function platformContainer(platforms) {
                 $tplTable.toggle();
             }
         }).appendTo($container);
-        const $tplTable = $('<table>', { class: 'tpl-table', css: { display: 'none' } }).appendTo($container);
+        const $tplTable = $('<table>', {
+            class: 'tablesorter',
+            css: {
+            display: 'none',
+            maxWidth: '300px'
+            }
+        }).appendTo($container);
         const $thead = $('<thead>').appendTo($tplTable);
         const $tbody = $('<tbody>').appendTo($tplTable);
         const $headerRow = $('<tr>');
-        $('<th>', { class: 'sortable', 'data-sort': 0, text: 'Library' }).appendTo($headerRow);
-        $('<th>', { class: 'sortable', 'data-sort': 1, text: 'Version' }).appendTo($headerRow);
-        $('<th>', { class: 'sortable', 'data-sort': 2, text: 'Status' }).appendTo($headerRow);
+        $('<th>', { text: 'Library' }).appendTo($headerRow);
+        $('<th>', { text: 'Version' }).appendTo($headerRow);
         $headerRow.appendTo($thead);
         tplArray.forEach(tpl => {
             $('<tr>').append(
                 $('<td>').html(`<a href="#" class="tpl-link" data-tpl="${tpl.name}">${tpl.name}</a>`),
                 $('<td>').text(tpl.version || 'N/A'),
-                $('<td>').text(tpl.status)
             ).appendTo($tbody);
         });
-        initializeTableSorting($thead, $tbody);
-        $thead.find('.sortable').first().click();
         $('.tpl-link').click(function(event) {
             event.preventDefault();
             const tplName = $(this).data('tpl');
@@ -268,14 +270,14 @@ function showVersionsForTPL(tplName) {
                 <tr class="modal-table-row">
                     <td>${platform.name}</td>
                     <td>${matchingTPL.version || 'N/A'}</td>
-                    <td><strong>${matchingTPL.status}</strong></td>
                 </tr>
             `);
         }
     });
     if (!tplFound) {
         $modalBody.append('<tr><td colspan="3">No versions of this TPL found across platforms.</td></tr>');
     }
+    $modalTable.trigger("update");
     $modal.show();
     $('.close').click(function() {
         $modal.hide();
@@ -285,28 +287,6 @@ function showVersionsForTPL(tplName) {
             $modal.hide();
         }
     });
-    const $thead = $modalTable.find('thead');
-    initializeTableSorting($thead, $modalBody);
-    $thead.find('.sortable').first().click();
-}
-
-function initializeTableSorting($thead, $tbody) {
-    let sortOrder = 1;
-    $thead.find('.sortable').click(function() {
-    const columnIndex = $(this).data('sort');
-    const rows = $tbody.find('tr').get();
-    rows.sort((a, b) => {
-        const keyA = $(a).children('td').eq(columnIndex).text().toUpperCase();
-        const keyB = $(b).children('td').eq(columnIndex).text().toUpperCase();
-        if (keyA < keyB) return -1 * sortOrder;
-        if (keyA > keyB) return 1 * sortOrder;
-        return 0;
-    });
-    $.each(rows, (_index, row) => {
-        $tbody.append(row);
-    });
-    sortOrder *= -1;
-    });
 }
 
 function main() {
@@ -319,7 +299,9 @@ function main() {
         platformContainer(data.platforms);
         packageContainer(data.platforms);
         $packageContainer.hide();
-
+        $(document).ready(function() {
+            $("table.tablesorter").tablesorter();
+        });
         const urlParams = new URLSearchParams(window.location.search);
         const platform = urlParams.get('platform');
         if (platform) {

diff --git a/Maintenance/test_handling/create_testresult_page b/Maintenance/test_handling/create_testresult_page
@@ -838,6 +838,7 @@ sub create_summary_page {
         <title>Summary</title>
         <link rel="shortcut icon" href="cgal.ico">
         <link rel="stylesheet" type="text/css" href="testresult.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.default.min.css">
         <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
         <script>
             var searchURLs = $json_urls;
@@ -849,15 +850,14 @@ sub create_summary_page {
             <div class="modal-content">
                 <span class="close">&times;</span>
                 <h2 id="tplModalTitle">Versions of TPL</h2>
-                <table class="modaltable">
+                <table class="tablesorter">
                     <thead>
                         <tr>
-                            <th class="modalHeader sortable" data-sort="0">Platform</th>
-                            <th class="modalHeader sortable" data-sort="1">Version</th>
-                            <th class="modalHeader sortable" data-sort="2">Status</th>
+                            <th>Platform</th>
+                            <th>Version</th>
                         </tr>
                     </thead>
-                    <tbody class="modalBody"></tbody>
+                    <tbody></tbody>
                 </table>
             </div>
         </div>
@@ -891,6 +891,7 @@ sub create_summary_page {
             <div id="package_container"></div>
         </div>
         <script src="$release_name/Summary_Script.js" type="application/javascript"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
 EOF
     if (-e $summary_script_src) {
         copy($summary_script_src, $summary_script_dest) or die "Copy failed: $!";

diff --git a/Maintenance/test_handling/testresult.css b/Maintenance/test_handling/testresult.css
@@ -170,11 +170,6 @@ TABLE.result TD > a.package_name {
     color: #1A0DAB;
 }
 
-.sortable{
-    cursor: pointer;
-    text-decoration: underline;
-}
-
 /* TPL Modal */
 .modal {
     display: none;
@@ -222,24 +217,51 @@ TABLE.result TD > a.package_name {
     color: #555;
 }
 
-.modaltable{
+table.tablesorter {
+    width: 100%;
+    margin: 20px 0;
     border-collapse: collapse;
-    cellspacing: 0;
+    background-color: #f0f0f0;
+    color: #333;
+    font-family: Arial, sans-serif;
 }
 
-.modalHeader{
-    text-align: center;
-    width: auto;
+table.tablesorter thead th {
+    background-color: #d9d9d9;
+    color: #333;
+    font-weight: bold;
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: left;
+    cursor: pointer;
 }
 
-.modalBody {
-    text-align: center;
+table.tablesorter thead th.tablesorter-headerAsc {
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 20px;
+}
+
+table.tablesorter thead th.tablesorter-headerDesc {
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 20px;
+}
+
+table.tablesorter tbody tr:nth-child(odd) {
+    background-color: #e6e6e6;
 }
 
-.modal-table-row {
-    border-bottom: 2px ridge #000;
+table.tablesorter tbody tr:nth-child(even) {
+    background-color: #f0f0f0;
+}
+
+table.tablesorter tbody td {
+    padding: 8px;
+    border: 1px solid #ccc;
+    text-align: left;
 }
 
-.modal-table-row td {
-    padding: 7px;
-}
+table.tablesorter tbody tr:hover {
+    background-color: #d1d1d1
+}