Added loading indicator on show button.

Datatable added to the table, and included Datatable-files everywhere, since Datatable will be implemented several places.

application/views/accumulate/index.php

@@ -83,7 +83,7 @@
                 <!-- Button (Double) -->
                 <div class="form-group row">
                     <div class="col-md-10">
-                        <button id="button1id" type="button" name="button1id" class="btn btn-success btn-primary" onclick="accumulatePlot(this.form)">Show</button>
+                        <button id="button1id" type="button" name="button1id" class="btn btn-success btn-primary ld-ext-right" onclick="accumulatePlot(this.form)">Show<div class="ld ld-ring ld-spin"></div></button>
                     </div>
                 </div>
 

application/views/interface_assets/footer.php

@@ -31,9 +31,7 @@
     <script src="<?php echo base_url() ;?>assets/js/sections/notes.js"></script>
 <?php } ?>
 
-<?php if ($this->uri->segment(1) == "awards") { ?>
     <script type="text/javascript" src="<?php echo base_url(); ?>assets/js/datatables.min.js"></script>
-<?php } ?>
 
 <?php if ($this->uri->segment(1) == "search" && $this->uri->segment(2) == "filter") { ?>
 
@@ -1794,6 +1792,9 @@ $(document).ready(function(){
     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
     <script>
         function accumulatePlot(form) {
+            $(".ld-ext-right").addClass('running');
+            $(".ld-ext-right").prop('disabled', true);
+
             // using this to change color of legend and label according to background color
             var background = $('body').css( "background-color");
             var color = 'grey';
@@ -1827,7 +1828,7 @@ $(document).ready(function(){
                     $("#accumulateContainer").append("<canvas id=\"myChartAccumulate\" width=\"400\" height=\"150\"></canvas><div id=\"accumulateTable\"></div>");
 
                     // appending table to hold the data
-                    $("#accumulateTable").append('<table class="accutable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
+                    $("#accumulateTable").append('<table style="width:100%" class="accutable table table-sm table-bordered table-hover table-striped table-condensed text-center"><thead>' +
                         '<tr>' +
                         '<td>#</td>' +
                         '<td>' + periodtext + '</td>' +
@@ -1897,6 +1898,16 @@ $(document).ready(function(){
                             },
                         }
                     });
+                    $(".ld-ext-right").removeClass('running');
+                    $(".ld-ext-right").prop('disabled', false);
+                    $('.accutable').DataTable({
+                        responsive: false,
+                        ordering: false,
+                        "scrollY":        "400px",
+                        "scrollCollapse": true,
+                        "paging":         false,
+                        "scrollX": true
+                    });
                 }
             });
         }

application/views/interface_assets/header.php

@@ -28,16 +28,14 @@
 	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/plugins/quill/quill.snow.css" />
 	<?php } ?>
 
-	<?php if ($this->uri->segment(1) == "qrz") { ?>
+	<?php if ($this->uri->segment(1) == "qrz" || $this->uri->segment(1) == "accumulated") { ?>
 	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/loading.min.css" />
 	<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/ldbtn.min.css" />
 	<?php } ?>
 
     <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/js/bootstrapdialog/css/bootstrap-dialog.min.css" />
 
-      <?php if ($this->uri->segment(1) == "awards") { ?>
-          <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/datatables.min.css"/>
-      <?php } ?>
+  <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/datatables.min.css"/>
 
  	<?php if ($this->uri->segment(1) == "adif") { ?>
   	<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/datepicker.css" />