Fix several issues with Datatables

app/grandchallenge/admins/templates/admins/admins_list.html

@@ -29,7 +29,7 @@ <h2>Admins for {{ challenge.short_name }}</h2>
 {% endblock %}
 
 {% block tableExtraHeaders %}
-    <th>Remove</th>
+    <th class="nonSortable">Remove</th>
 {% endblock tableExtraHeaders %}
 
 {% block tableExtraBody %}

app/grandchallenge/algorithms/templates/algorithms/algorithmpermissionrequest_list.html

@@ -36,7 +36,7 @@ <h2>Permission Requests for {{ algorithm.title }}</h2>
                 <th>Department</th>
                 <th>Location</th>
                 <th>Website</th>
-                <th>Status</th>
+                <th class="nonSortable">Status</th>
             </tr>
             </thead>
             <tbody>

app/grandchallenge/archives/templates/archives/archivepermissionrequest_list.html

@@ -35,7 +35,7 @@ <h2>Permission Requests for {{ archive.title }}</h2>
                 <th>Department</th>
                 <th>Location</th>
                 <th>Website</th>
-                <th>Status</th>
+                <th class="nonSortable">Status</th>
             </tr>
             </thead>
             <tbody>

app/grandchallenge/challenges/static/js/challenges/challenge_costs_overview.mjs

@@ -3,12 +3,5 @@ document.addEventListener("DOMContentLoaded", event => {
         order: [[2, "desc"]],
         lengthChange: false,
         pageLength: 100,
-        columnDefs: [
-            {
-                targets: "datatables-non-sortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/challenges/static/js/challenges/challengerequest_list_table.mjs

@@ -2,13 +2,5 @@ document.addEventListener("DOMContentLoaded", event => {
     $("#challengeRequestsTable").DataTable({
         order: [[3, "desc"]],
         lengthChange: false,
-        pageLength: 50,
-        columnDefs: [
-            {
-                targets: "datatables-non-sortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/challenges/templates/challenges/challengerequest_list.html

@@ -22,7 +22,7 @@ <h2>{% if not perms.challenges.change_challengerequest %}Your{% endif %} Challen
         <table class="table table-hover table-borderless table-sm w-100" id="challengeRequestsTable">
             <thead class="thead-light">
             <tr>
-                <th class="datatables-non-sortable"></th>
+                <th class="nonSortable"></th>
                 <th class="text-center">Acronym</th>
                 <th class="text-center">Creator</th>
                 <th class="text-center">Planned start date</th>

app/grandchallenge/core/static/css/core.css

@@ -242,3 +242,29 @@ a[aria-expanded="false"] .fa-chevron-down {
 .htmx-request.htmx-indicator {
     display: inline-block;
 }
+
+/* datatables */
+.dt-layout-start,
+.dt-layout-end {
+    padding-top: 0.2rem;
+    padding-bottom: 0.2rem;
+}
+
+.dt-container ul.pagination {
+    justify-content: right;
+}
+
+.dt-layout-full,
+.dt-layout-start,
+.dt-layout-end {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+.dt-scroll-body {
+    border-bottom: none !important;
+}
+
+.dt-orderable-none .dt-column-order {
+    display: none;
+}

app/grandchallenge/core/static/js/datatables.defaults.mjs

@@ -1,12 +1,26 @@
 $.extend($.fn.dataTable.defaults, {
     scrollX: true,
+    lengthChange: false,
     language: {
         paginate: {
             next: "Next",
             previous: "Previous",
         },
     },
     pagingType: "simple_numbers",
+    columnDefs: [
+        {
+            // Prevents unexpected styling for dt-*-type datatypes
+            // Only applies to client-side tables
+            type: "string",
+            targets: "_all",
+        },
+        {
+            targets: "nonSortable",
+            searchable: false,
+            orderable: false,
+        },
+    ],
 });
 
 $(document).on("init.dt", () => {

app/grandchallenge/core/static/js/permission_request_display_table.mjs

@@ -5,12 +5,5 @@ $(document).ready(() => {
             [0, "desc"],
         ],
         pageLength: 25,
-        columnDefs: [
-            {
-                targets: [-1],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/core/static/js/sort_tables.js

@@ -1,11 +1,8 @@
 $(document).ready(() => {
     $("table.sortable").dataTable({
-        bJQueryUI: false,
-        sPaginationType: "full_numbers",
-        bPaginate: false,
-        bLengthChange: false,
-        bFilter: false,
-        bInfo: false,
-        bAutoWidth: false,
+        paginate: false,
+        lengthChange: false,
+        filter: false,
+        info: false,
     });
 });

app/grandchallenge/datatables/static/js/datatables/list.mjs

@@ -20,11 +20,7 @@ document.addEventListener("DOMContentLoaded", () => {
         pageLength: 25,
         serverSide: true,
         columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
+            ...$.fn.dataTable.defaults.columnDefs,
             {
                 className: `align-middle text-${textAlign}`,
                 targets: "_all",

app/grandchallenge/evaluation/static/js/evaluation/combined_ranks_table.mjs

@@ -5,6 +5,5 @@ document.addEventListener("DOMContentLoaded", event => {
             [2, "asc"],
         ],
         lengthChange: false,
-        pageLength: 50,
     });
 });

app/grandchallenge/evaluation/static/js/evaluation/groundtruths_table.mjs

@@ -1,11 +1,3 @@
 $(document).ready(() => {
-    $("#groundtruthsTable").DataTable({
-        columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
-    });
+    $("#groundtruthsTable").DataTable();
 });

app/grandchallenge/evaluation/static/js/evaluation/leaderboard.mjs

@@ -14,7 +14,6 @@ $(document).ready(() => {
         // The column index of the default sort, must match the table set up.
         order: [[0, "asc"]],
         lengthChange: false,
-        pageLength: 50,
         serverSide: true,
         ajax: {
             url: ".",
@@ -24,11 +23,7 @@ $(document).ready(() => {
             },
         },
         columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
+            ...$.fn.dataTable.defaults.columnDefs,
             {
                 targets: "toggleable",
                 visible: false,
@@ -37,7 +32,7 @@ $(document).ready(() => {
         ],
         ordering: true,
         autoWidth: false,
-        dom: getDataTablesDOMTemplate(),
+        layout: getDatatableLayout(),
         buttons: getDataTablesButtons(),
     });
 
@@ -61,31 +56,39 @@ $(document).ready(() => {
             }
         });
     }
-
-    if (displayLeaderboardDateButton === true) {
-        document.getElementById("compare-buttons-group").innerHTML += `
-            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#leaderboardDateModal"
-                    title="Leaderboard history">
-                <i class="fas fa-history"></i>
-            </button>
-        `;
-    }
 });
 
-function getDataTablesDOMTemplate() {
-    let DOM = "<'row'<'col-12'f>>";
+function getDatatableLayout() {
+    const dateButton = $(`
+        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#leaderboardDateModal"
+                title="Leaderboard history">
+            <i class="fas fa-history"></i>
+        </button>
+    `);
 
-    if (
-        allowMetricsToggling === true ||
-        displayLeaderboardDateButton === true
-    ) {
-        DOM +=
-            "<'row'<'#compare-buttons-group.col-md-6'><'col px-0 text-right'B>>";
+    if (displayLeaderboardDateButton) {
+        if (!allowMetricsToggling) {
+            return {
+                topEnd: "search",
+                topStart: dateButton,
+            };
+        }
+        return {
+            top1End: "search",
+            topStart: dateButton,
+            topEnd: "buttons",
+        };
     }
 
-    DOM +=
-        "<'row'<'col-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>";
-    return DOM;
+    if (!allowMetricsToggling) {
+        return {
+            topEnd: "search",
+        };
+    }
+    return {
+        top1End: "search",
+        topEnd: "buttons",
+    };
 }
 
 function getDataTablesButtons() {

app/grandchallenge/evaluation/static/js/evaluation/methods_table.js

@@ -1,11 +1,3 @@
 $(document).ready(() => {
-    $("#methodsTable").DataTable({
-        columnDefs: [
-            {
-                targets: "nonSortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
-    });
+    $("#methodsTable").DataTable();
 });

app/grandchallenge/evaluation/static/js/evaluation/phase_costs_overview.mjs

@@ -3,12 +3,5 @@ document.addEventListener("DOMContentLoaded", event => {
         order: [[0, "asc"]],
         lengthChange: false,
         pageLength: 100,
-        columnDefs: [
-            {
-                targets: "datatables-non-sortable",
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/pages/static/pages/js/page_list.mjs

@@ -1,12 +1,5 @@
 $(document).ready(() => {
     $("#pagesTable").DataTable({
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [4, 5],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/pages/templates/pages/page_list.html

@@ -36,8 +36,8 @@ <h2>Pages for {{ challenge.short_name }}</h2>
                 <th>Title (in URL)</th>
                 <th>Display Title</th>
                 <th>Visible to</th>
-                <th>Edit</th>
-                <th>Delete</th>
+                <th class="nonSortable">Edit</th>
+                <th class="nonSortable">Delete</th>
             </tr>
             </thead>
             <tbody>

app/grandchallenge/participants/static/participants/js/registrationquestion_list.mjs

@@ -2,12 +2,5 @@ $(document).ready(() => {
     $("#registrationQuestionsTable").DataTable({
         order: [[0, "asc"]],
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [3, 4],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/participants/static/participants/js/registrationrequest_list.mjs

@@ -2,12 +2,5 @@ $(document).ready(() => {
     $("#participantsTable").DataTable({
         order: [[0, "desc"]],
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [-1],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/participants/static/participants/js/user_list.mjs

@@ -1,12 +1,5 @@
 $(document).ready(() => {
     $("#usersTable").DataTable({
         pageLength: 10,
-        columnDefs: [
-            {
-                targets: [-1],
-                searchable: false,
-                orderable: false,
-            },
-        ],
     });
 });

app/grandchallenge/participants/templates/participants/participants_list.html

@@ -22,7 +22,7 @@ <h2>Participants for {{ challenge.short_name }}</h2>
 {% endblock %}
 
 {% block tableExtraHeaders %}
-    <th>Message</th>
+    <th class="nonSortable">Message</th>
 {% endblock tableExtraHeaders %}
 
 {% block tableExtraBody %}

app/grandchallenge/participants/templates/participants/registrationquestion_list.html

@@ -40,8 +40,8 @@ <h2>Registration Questions for {{ challenge.short_name }}</h2>
                 <th>Created</th>
                 <th>Question Text</th>
                 <th>Required</th>
-                <th>Edit</th>
-                <th>Delete</th>
+                <th class="nonSortable">Edit</th>
+                <th class="nonSortable">Delete</th>
             </tr>
             </thead>
             <tbody>

app/grandchallenge/participants/templates/participants/registrationrequest_list.html

@@ -36,7 +36,7 @@ <h2>Participation Requests for {{ challenge.short_name }}</h2>
                     <th>Answers to questions</th>
                 {% endif %}
                 <th>Status</th>
-                <th>Accept / Reject</th>
+                <th class="nonSortable">Accept / Reject</th>
             </tr>
             </thead>
             <tbody>