diff options
| -rw-r--r-- | uploader/static/js/datatables.js | 60 | ||||
| -rw-r--r-- | uploader/static/js/populations.js | 33 | ||||
| -rw-r--r-- | uploader/static/js/species.js | 32 | ||||
| -rw-r--r-- | uploader/templates/phenotypes/view-dataset.html | 39 |
4 files changed, 85 insertions, 79 deletions
diff --git a/uploader/static/js/datatables.js b/uploader/static/js/datatables.js index 8d54a84..9782a60 100644 --- a/uploader/static/js/datatables.js +++ b/uploader/static/js/datatables.js @@ -54,4 +54,62 @@ var dtAddRowClickHandler = (tableId) => { var dtAddCommonHandlers = (tableId) => { dtAddRowSelectionHandler(tableId); dtAddRowClickHandler(tableId); -} +}; + +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 buildDataTable = (tableId, data = [], columns = [], userSettings = {}) => { + var defaultSettings = { + responsive: true, + /* == Scroller settings == */ + scroller: true, + paging: true, // MUST be true for scroller to work + sDom: "iti", + scrollY: "100vh", + scrollCollapse: true, + /* == END: Scroller settings == */ + lengthMenu: defaultLengthMenu(data), + language: { + processing: "Processing… Please wait.", + loadingRecords: "Loading population — Please wait.", + lengthMenu: "Show _MENU_ populations", + info: "Showing _START_ to _END_ of _TOTAL_ populations" + }, + 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); + } + } + }); + } + } + var theDataTable = $(tableId).DataTable({ + ...defaultSettings, + ...userSettings + }); + return theDataTable; +}; diff --git a/uploader/static/js/populations.js b/uploader/static/js/populations.js index 5c1f848..73e298a 100644 --- a/uploader/static/js/populations.js +++ b/uploader/static/js/populations.js @@ -1,19 +1,10 @@ -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: [ +$(() => { + dtAddCommonHandlers("#tbl-select-population"); + 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 +18,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..c1374c6 100644 --- a/uploader/static/js/species.js +++ b/uploader/static/js/species.js @@ -1,19 +1,10 @@ -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: [ +$(() => { + dtAddCommonHandlers("#tbl-select-species"); + 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 +17,5 @@ var speciesDataTable = (speciesdata) => { return `${aspecies.FullName} (${aspecies.SpeciesName})`; } } - ] - }); -}; - -$(() => { - dtAddCommonHandlers("#tbl-select-species"); - speciesDataTable(JSON.parse( - $("#tbl-select-species").attr("data-species-list"))); + ]); }); 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(); |