3 files changed, 79 insertions, 96 deletions

diff --git a/uploader/static/js/datatables.js b/uploader/static/js/datatables.js
index 8d54a84..a72245c 100644
--- a/uploader/static/js/datatables.js
+++ b/uploader/static/js/datatables.js
@@ -1,57 +1,75 @@
 /** Handlers for events in datatables **/
 
-var dtAddRowSelectionHandler = (tableId) => {
-    $(tableId).on("draw.dt", (event) => {
-        $(".chk-row-select").on("change", (event) => {
-            var checkboxOrRadio = event.target;
-            var tablerow = checkboxOrRadio.parentElement.parentElement;
-            var tableclass = tablerow.getAttribute("class");
-            if(checkboxOrRadio.checked) {
-                if (checkboxOrRadio.type == "radio") {
-                    $(tableId + " tr").each((index, row) => {
-                        var rowKlass = $(row).attr("class") || "";
-                        row.setAttribute(
-                            "class", rowKlass.replaceAll("selected", "").trim());
-                    });
-                }
-                tablerow.setAttribute("class", `${tableclass} selected`);
-            }
-            else {
-                tablerow.setAttribute(
-                    "class", tableclass.replaceAll("selected", "").trim());
-            }
-        });
-    });
+var addTableLength = (menuList, lengthToAdd, dataLength) => {
+    if(dataLength >= lengthToAdd) {
+        newList = structuredClone(menuList);//menuList.slice(0, menuList.length); // shallow copy
+        newList.push(lengthToAdd);
+        return newList;
+    }
+    return menuList;
 };
 
+var defaultLengthMenu = (data) => {
+    menuList = []
+    var lengths = [10, 25, 50, 100, 1000, data.length];
+    lengths.forEach((len) => {
+        menuList = addTableLength(menuList, len, data.length);
+    });
+    return menuList;
+};
 
-var toggleCheck = (checkboxOrRadio) => {
-    if (checkboxOrRadio.length > 0) {
-        var currentState = checkboxOrRadio.prop("checked");
-        var newState = !currentState;
-        if (currentState == true && checkboxOrRadio.attr("type").toLowerCase() == "radio") {
-            // We don't want to toggle from true to false by clicking on the row
-            // if it is a radio button.
-            newState = currentState;
+var buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => {
+    var defaultSettings = {
+        responsive: true,
+        layout: {
+            topStart: null,
+            topEnd: null,
+            bottomStart: null,
+            bottomEnd: null,
+        },
+        select: true,
+        /* == Scroller settings == */
+        scroller: true,
+        paging: true, // MUST be true for scroller to work
+        scrollY: "750px",
+        deferRender: true,
+        /* == END: Scroller settings == */
+        lengthMenu: defaultLengthMenu(data),
+        language: {
+            processing: "Processing… Please wait.",
+            loadingRecords: "Loading table data… Please wait.",
+            lengthMenu: "",
+            info: ""
+        },
+        data: data,
+        columns: columns,
+        drawCallback: (settings) => {
+            $(this[0]).find("tbody tr").each((idx, row) => {
+                var arow = $(row);
+                var checkboxOrRadio = arow.find(".chk-row-select");
+                if (checkboxOrRadio) {
+                    if (arow.hasClass("selected")) {
+                        checkboxOrRadio.prop("checked", true);
+                    } else {
+                        checkboxOrRadio.prop("checked", false);
+                    }
+                }
+            });
         }
-        checkboxOrRadio.prop("checked", newState);
-        checkboxOrRadio.trigger("change");
     }
-};
-
-
-var dtAddRowClickHandler = (tableId) => {
-    $(tableId).on("draw.dt", (event) => {
-        $(tableId + " tbody tr").on("click", (event) => {
-            var row = event.target.closest("tr");
-            var checkboxOrRadio = $(row).find(".chk-row-select");
-            toggleCheck(checkboxOrRadio);
+    var theDataTable = $(tableId).DataTable({
+        ...defaultSettings,
+        ...userSettings
+    });
+    theDataTable.on("select", (event, datatable, type, cell, originalEvent) => {
+        datatable.rows({selected: true}).nodes().each((node, index) => {
+            $(node).find(".chk-row-select").prop("checked", true)
         });
     });
+    theDataTable.on("deselect", (event, datatable, type, cell, originalEvent) => {
+        datatable.rows({selected: false}).nodes().each((node, index) => {
+            $(node).find(".chk-row-select").prop("checked", false)
+        });
+    });
+    return theDataTable;
 };
-
-
-var dtAddCommonHandlers = (tableId) => {
-    dtAddRowSelectionHandler(tableId);
-    dtAddRowClickHandler(tableId);
-}
diff --git a/uploader/static/js/populations.js b/uploader/static/js/populations.js
index 5c1f848..be1231f 100644
--- a/uploader/static/js/populations.js
+++ b/uploader/static/js/populations.js
@@ -1,19 +1,9 @@
-var populationDataTable = (populationdata) => {
-    var lengthMenu = [10, 25, 50, 100, 1000];
-    if(populationdata.length > 1000) {
-        lengthMenu.push(populationdata.length)
-    }
-    $("#tbl-select-population").DataTable({
-        responsive: true,
-        lengthMenu: lengthMenu,
-        language: {
-            processing: "Processing… Please wait.",
-            loadingRecords: "Loading population — Please wait.",
-            lengthMenu: "Show _MENU_ populations",
-            info: "Showing _START_ to _END_ of _TOTAL_ populations"
-        },
-        data: populationdata,
-        columns: [
+$(() => {
+    var populationsDataTable = buildDataTable(
+        "#tbl-select-population",
+        JSON.parse(
+            $("#tbl-select-population").attr("data-populations-list")),
+        [
             {
                 data: (apopulation) => {
                     return `<input type="radio" name="population_id"`
@@ -27,13 +17,5 @@ var populationDataTable = (populationdata) => {
                     return `${apopulation.FullName} (${apopulation.InbredSetName})`;
                 }
             }
-        ]
-    });
-};
-
-
-$(() => {
-    dtAddCommonHandlers("#tbl-select-population");
-    populationDataTable(JSON.parse(
-        $("#tbl-select-population").attr("data-populations-list")));
+        ]);
 });
diff --git a/uploader/static/js/species.js b/uploader/static/js/species.js
index 1f2aa3b..9ea3017 100644
--- a/uploader/static/js/species.js
+++ b/uploader/static/js/species.js
@@ -1,19 +1,9 @@
-var speciesDataTable = (speciesdata) => {
-    var lengthMenu = [10, 25, 50, 100, 1000];
-    if(speciesdata.length > 1000) {
-        lengthMenu.push(speciesdata.length)
-    }
-    $("#tbl-select-species").DataTable({
-        responsive: true,
-        lengthMenu: lengthMenu,
-        language: {
-            processing: "Processing… Please wait.",
-            loadingRecords: "Loading species — Please wait.",
-            lengthMenu: "Show _MENU_ species",
-            info: "Showing _START_ to _END_ of _TOTAL_ species"
-        },
-        data: speciesdata,
-        columns: [
+$(() => {
+    var speciesDataTable = buildDataTable(
+        "#tbl-select-species",
+        JSON.parse(
+            $("#tbl-select-species").attr("data-species-list")),
+        [
             {
                 data: (aspecies) => {
                     return `<input type="radio" name="species_id"`
@@ -26,12 +16,5 @@ var speciesDataTable = (speciesdata) => {
                     return `${aspecies.FullName} (${aspecies.SpeciesName})`;
                 }
             }
-        ]
-    });
-};
-
-$(() => {
-    dtAddCommonHandlers("#tbl-select-species");
-    speciesDataTable(JSON.parse(
-        $("#tbl-select-species").attr("data-species-list")));
+        ]);
 });