Extract common DataTables into a reusable function.

1 files changed, 10 insertions, 29 deletions

diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index 833ca12..f171483 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -96,21 +96,10 @@
       dtAddCommonHandlers("#tbl-phenotypes-list");
 
       var data = {{phenotypes | tojson}};
-      var dtPhenotypesList = $("#tbl-phenotypes-list").DataTable({
-          select: true,
-          select: {
-              selector: "td:first-child.chk-row-select"
-          },
-          scroller: true,
-          sDom: "iti",
-          scrollY: "100vh",
-          scrollCollapse: true,
-          responsive: true,
-          data: data,
-          rowId: function(pheno) {
-              return `${pheno.InbredSetCode}_${pheno.xref_id}`;
-          },
-          columns: [
+      var dtPhenotypesList = buildDataTable(
+          "#tbl-phenotypes-list",
+          data,
+          [
               {
                   data: function(pheno) {
                       return `<input type="checkbox" name="selected-phenotypes" `
@@ -142,20 +131,12 @@
                   }
               }
           ],
-          drawCallback: function(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);
-                      }
-                  }
-              });
-          }
-      });
+          {
+              // select: true, // extension is causing trouble.
+              rowId: function(pheno) {
+                  return `${pheno.InbredSetCode}_${pheno.xref_id}`;
+              }
+          });
 
       $("#btn-phenotypes-list-select-all").on("click", (event) => {
           dtPhenotypesList.rows().select();