From dcbfeaf993ae626e10fe4df869f536de43c65541 Mon Sep 17 00:00:00 2001
From: JaseMK <jase@jasoncarvalho.com>
Date: Thu, 25 May 2023 16:19:06 +0100
Subject: [PATCH] Fixed table rendering/sorting issues

---
 website/biographies.php | 16 +++++++++++-----
 website/biography.php   | 26 ++++++++++++++++++++------
 website/explore.php     | 18 +++++++++++++-----
 website/sidebar.php     |  2 +-
 4 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/website/biographies.php b/website/biographies.php
index 15b4b3a..cf42169 100644
--- a/website/biographies.php
+++ b/website/biographies.php
@@ -154,15 +154,21 @@
 
 
 <script>
+    var table = $('#dataTable').DataTable( {
+        "language": {
+            "search": "Filter:"
+        }
+    } );
     $( document ).ready(function() {
+
         $.getJSON("services/biographies.php", function(result){
+            table.clear() //clear content
             $.each(result, function(i, field){
-                html = '<tr><td>' ;
-                html += '<a href="biography.php?id=' + field.subject + '">' + field.subject_label + '</a></td>';
-                html += '<td>' + field.dob + '</td><td>' + field.dod + '</td></tr>';
-                $('#dataTable tr:last').after(html);
+                subjectHtml = '<a href="biography.php?id=' + field.subject + '">' + field.subject_label + '</a>';
+                table.row.add([subjectHtml, field.dob, field.dod])
             });
-            $('#dataTable').DataTable();
+            table.draw() //update display
+
         });
     });
 
diff --git a/website/biography.php b/website/biography.php
index 94fbc52..44e5748 100644
--- a/website/biography.php
+++ b/website/biography.php
@@ -252,7 +252,7 @@
                                             </tfoot>
                                             -->
                                             <tbody>
-                                                <tr><td></td><td></td><td></td><td></td></tr>
+                                                <!--<tr><td></td><td></td><td></td><td></td></tr>-->
 
                                             </tbody>
                                         </table>
@@ -329,9 +329,10 @@
     <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
 
     <!-- Page level custom scripts -->
-    <script src="js/demo/datatables-demo.js"></script>
 
 <script>
+    //*** FUNCTIONS ***
+
     function createGeoJson(inputData) {
         output = {
             "type": "FeatureCollection",
@@ -394,8 +395,17 @@ function zoomToPoint(lat, long) {
         map.flyTo([lat, long], zoomLevel);
     }
 
+    // *** END OF FUNCTIONS ***
+
     var meetupsData;
 
+    var table = $('#meetupsTable').DataTable( {
+        "language": {
+            "search": "Filter:"
+        }
+    } );
+    //table.clear() //clear content
+
     $( document ).ready(function() {
         $.getJSON("services/biography.php?id=<?= $_GET["id"]; ?>", function(result){
             $('#spanSubjectName').text(result.name);
@@ -410,21 +420,24 @@ function zoomToPoint(lat, long) {
         });
 
         $.getJSON("services/meetups.php?id=<?= $_GET["id"]; ?>", function(result){
+
             $.each(result, function(i, field){
-                buttonHtml = '<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#meetupModal" onclick="populateModal('+i+');"><i class="fas fa-search-plus"></i></button> ';
 
+                buttonHtml = '<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#meetupModal" onclick="populateModal('+i+');"><i class="fas fa-search-plus"></i></button> ';
+                /*
                 html = '<tr>';
-
                 html += '<td>' + buttonHtml + '...</td>';
                 html += '<td>' + field.location + '</td>';
                 html += '<td>' + field.participants + '</td>';
                 //html += '<td><a href="#">' + field.meetup.substring(field.meetup.lastIndexOf('meetup') + 7) + '</a></td>';
                 html += '<td>' + field.purpose.substring(field.purpose.lastIndexOf('/') + 1) + '</td>';
-
                 html += '</tr>';
                 $('#meetupsTable tr:last').after(html);
+                */
+                table.row.add([buttonHtml + ' ...', field.location, field.participants, field.purpose])
             });
-            $('#meetupsTable').DataTable();
+            //$('#meetupsTable').DataTable();
+            table.draw();
 
             $geoJsonData = createGeoJson(result);
             meetupsData = result;
@@ -485,6 +498,7 @@ function markerOnClick(e) {
 
         const tiles = L.tileLayer('https://osm.gs.mil/tiles/humanitarian/{z}/{x}/{y}.png', {
             maxZoom: 14,
+            minZoom: 2,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map);
 
diff --git a/website/explore.php b/website/explore.php
index d790bdb..cae197b 100644
--- a/website/explore.php
+++ b/website/explore.php
@@ -304,11 +304,19 @@ function populateDetailsPanel(index) {
 
         const tiles = L.tileLayer('https://osm.gs.mil/tiles/humanitarian/{z}/{x}/{y}.png', {
             maxZoom: 14,
+            minZoom: 2,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map);
         var pointsLayer = L.geoJSON().addTo(map);
 
+        var table = $('#meetupsTable').DataTable( {
+            "language": {
+                "search": "Filter:"
+            }
+        } );
+
         $(document).ready(function() {
+
             $('#searchForm').on('submit', function(event) {
                 event.preventDefault();
 
@@ -319,7 +327,7 @@ function populateDetailsPanel(index) {
                 params = '?subject='+subject+'&participant='+participant+'&place='+place+'&purpose='+purpose;
                 $.getJSON('services/search.php'+params, function(result){
                     //console.log(result);
-                    $("#tbodyid").empty();
+                    table.clear();
                     meetupsData = result;
                     resultsCount = 0;
                     $('#resultsCount').text(resultsCount);
@@ -327,24 +335,24 @@ function populateDetailsPanel(index) {
                     $.each(result, function(i, field){
                         resultsCount ++;
                         buttonHtml = '<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#meetupModal" onclick="populateDetailsPanel('+i+');"><i class="fas fa-search-plus"></i></button> ';
-
+                        /*
                         html = '<tr>';
-
                         html += '<td>' + buttonHtml + '...</td>';
                         html += '<td>' + field.subject_label + '</td>';
                         html += '<td>' + field.participants + '</td>';
                         html += '<td>' + field.location + '</td>';
                         html += '<td>' + field.purpose + '</td>';
-
                         html += '</tr>';
                         $("#meetupsTable tbody").append(html);
+                        */
+                        table.row.add([buttonHtml + ' ...', field.subject_label, field.participants, field.location, field.purpose])
                     });
+                    table.draw();
 
                     $('#resultsCount').text(resultsCount);
                     if (resultsCount >= 500) {
                         $("#resultsCountWarning").removeClass("d-none");
                     }
-                    $('#meetupsTable').DataTable();
 
                     /*
                     if(map.hasLayer(pointsLayer)) {
diff --git a/website/sidebar.php b/website/sidebar.php
index a428024..f8a7a63 100644
--- a/website/sidebar.php
+++ b/website/sidebar.php
@@ -3,7 +3,7 @@
 <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
 
     <!-- Sidebar - Brand -->
-    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index-original.html">
+    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
         <div class="sidebar-brand-icon rotate-n-15">
             <i class="fas fa-handshake"></i>
         </div>