(Fix): Sorting could crash with new search mask due to calling destroy. Must leave exisitng after init and re-fill only.

Author: ArneTR

frontend/js/helpers/runs.js

@@ -242,7 +242,6 @@ async function getRepositories(sort_by = 'date') {
 const getRunsTable = async (el, url, include_uri=true, include_button=true, searching=false) => {
 
     let runs = null;
-    el.DataTable().clear().destroy() // clear old
 
     try {
         runs = await makeAPICall(url)
@@ -325,32 +324,40 @@ const getRunsTable = async (el, url, include_uri=true, include_button=true, sear
         }
     });
 
-    el.DataTable({
-        // searchPanes: {
-        //     initCollapsed: true,
-        // },
-        searching: searching,
-        data: runs.data,
-        columns: columns,
-        deferRender: true,
-        layout: {
-    topStart: '',
-    topEnd: '',
-    bottomStart: 'pageLength',
-    bottomEnd: 'paging'
-},
-        drawCallback: function(settings) {
-            document.querySelectorAll('input[type="checkbox"]').forEach((e) =>{
-                e.removeEventListener('change', updateCompareCount);
-                e.addEventListener('change', updateCompareCount);
-            })
-            document.querySelector('#unselect-button').removeEventListener('click', unselectHandler);
-            document.querySelector('#unselect-button').addEventListener('click', unselectHandler)
-            allow_group_select_checkboxes();
-            updateCompareCount();
-        },
-        order: [[columns.length-2, 'desc']] // API also orders, but we need to indicate order for the user
-    });
+
+   if ($.fn.DataTable.isDataTable(el)) { // just refill. A clean .destroy and .clear will break sorting sadly ...
+        const dt = el.DataTable();
+        dt.clear();
+        dt.rows.add(runs.data); // array or Ajax-style data
+        dt.draw();
+    } else { // init
+        el.DataTable({
+            // searchPanes: {
+            //     initCollapsed: true,
+            // },
+            searching: searching,
+            data: runs.data,
+            columns: columns,
+            deferRender: true,
+            layout: {
+                topStart: '',
+                topEnd: '',
+                bottomStart: 'pageLength',
+                bottomEnd: 'paging'
+            },
+            drawCallback: function(settings) {
+                document.querySelectorAll('input[type="checkbox"]').forEach((e) =>{
+                    e.removeEventListener('change', updateCompareCount);
+                    e.addEventListener('change', updateCompareCount);
+                })
+                document.querySelector('#unselect-button').removeEventListener('click', unselectHandler);
+                document.querySelector('#unselect-button').addEventListener('click', unselectHandler)
+                allow_group_select_checkboxes();
+                updateCompareCount();
+            },
+            order: [[columns.length-2, 'desc']] // API also orders, but we need to indicate order for the user
+        });
+    }
 
 }
 

frontend/js/hog-details.js

@@ -27,10 +27,6 @@ function uJToKWh(uj) {
 const updateData = async () => {
     $('.carbondb-data').hide();
 
-    if ($.fn.DataTable.isDataTable('#process-table')) {
-        $('#process-table').DataTable().destroy();
-    }
-
     let data;
 
     try {
@@ -46,26 +42,35 @@ const updateData = async () => {
         return;
     }
 
-    $('#process-table').DataTable({
-        data: data.process_data,
-        autoWidth: false,
-        columns: [
-            { data: 0, title: 'Name'},
-            {
-                data: 1,
-                title: 'Energy Impact',
-                className: "dt-body-right",
-                render: function(el, type, row) {
-                    if (type === 'display' || type === 'filter') {
-                        return (el.toLocaleString())
+    const process_table = $('#process-table')
+    if ($.fn.DataTable.isDataTable(process_table)) { // just refill. A clean .destroy and .clear will break sorting sadly ...
+        const dt = process_table.DataTable();
+        dt.clear();
+        dt.rows.add(data.process_data); // array or Ajax-style data
+        dt.draw();
+    } else { // init
+        process_table.DataTable({
+            data: data.process_data,
+            autoWidth: false,
+            columns: [
+                { data: 0, title: 'Name'},
+                {
+                    data: 1,
+                    title: 'Energy Impact',
+                    className: "dt-body-right",
+                    render: function(el, type, row) {
+                        if (type === 'display' || type === 'filter') {
+                            return (el.toLocaleString())
+                        }
+                        return el;
                     }
-                    return el;
                 }
-            }
-        ],
-        deferRender: true,
-        order: [] // API determines order
-    });
+            ],
+            deferRender: true,
+            order: [] // API determines order
+        });
+    }
+
 
     const total_energy = uJToKWh(data.total_combined_energy_uj);
     const total_cpu_energy = uJToKWh(data.total_cpu_energy_uj);
@@ -83,7 +88,6 @@ const updateData = async () => {
 
 }
 
-
 $(document).ready(function () {
 
     $('#rangestart').calendar({