pembaruan datatables untuk gauge

eispajak/views/templates/realtime_realisasi.pt

@@ -109,7 +109,7 @@
           <table class="table table-bordered table-sm" id="table1">
             <thead>
               <tr>
-                <th rowspan="2" style="vertical-align: middle;text-align:center !important;">Kode</th>
+                <th rowspan="2" style="vertical-align: middle;text-align:center !important;">No.</th>
                 <th rowspan="2" style="vertical-align: middle;text-align:center !important;">Uraian</th>
                 <th rowspan="2" style="vertical-align: middle;text-align:center !important;">Target</th>
                 <th colspan="2" style="vertical-align: middle;text-align:center !important;">Realisasi Hari Ini</th>
@@ -237,7 +237,6 @@
   </div>
 </div>
 <metal:js fill-slot="js_files">
-  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script> -->
   <script src="${home}/eis/static/js/fusioncharts.js"></script>
   <script src="${home}/eis/static/js/fusioncharts.widgets.js"></script>
   <script src="${home}/eis/static/js/fusioncharts.theme.candy.js"></script>
@@ -280,8 +279,8 @@
       datasets: [{
         data: [300, 100],
         backgroundColor: [
-          '#16a75c', //'rgb(255, 99, 132)',
-          '#ffb900', // 'rgb(54, 162, 235)'
+          '#16a75c',
+          '#ffb900',
 
         ],
         hoverOffset: 4
@@ -313,7 +312,7 @@
       datasets: [{
         label: 'Tren Realiasi',
         data: [100, 50, 300, 250, 100, 150, 2000],
-        borderColor: '#16a75c',// 'rgb(75, 192, 192)',
+        borderColor: '#16a75c',
         backgroundColor: '#16a75c8a',
         fill: true,
         tension: 0.5
@@ -341,7 +340,7 @@
       datasets: [{
         label: 'Tren Transaksi',
         data: [100, 50, 300, 250, 100, 150, 2000],
-        borderColor: '#16a75c',// 'rgb(75, 192, 192)',
+        borderColor: '#16a75c',
         backgroundColor: '#16a75c8a',
         fill: true,
         tension: 0.5
@@ -370,7 +369,7 @@
       datasets: [{
         label: 'Tren Kumulatif',
         data: [100, 150, 400, 650, 900, 950, 1100],
-        borderColor: '#ffb900', //'rgb(75, 192, 192)',
+        borderColor: '#ffb900',
         backgroundColor: '#debd68ad',
         fill: true,
         tension: 0.5
@@ -403,7 +402,6 @@
       trendChart();
     });
     
-    // Initialize Gauge Chart
     setTimeout(function() {
       initializeGauge();
       setTimeout(function() {
@@ -414,7 +412,6 @@
     $().datarefresh();
   });
   
-  // Function to initialize FusionCharts Gauge  
   function initializeGauge() {
     const dataSource = {
       chart: {
@@ -524,17 +521,14 @@
       }
     };
 
-    // Check if FusionCharts is loaded
     if (typeof FusionCharts === 'undefined') {
       return;
     }
     
-    // Check if container exists
     if (!document.getElementById('chart-container')) {
       return;
     }
 
-    // Wait for FusionCharts to be ready
     FusionCharts.ready(function() {
       
       window.myGauge = new FusionCharts({
@@ -633,12 +627,6 @@ function updateGauge(percentage, realisasi, target) {
     format: '(.ddd)',
   });
 
-  // var ytd_target = new Odometer({
-  //   el: document.getElementById('ytd_target'),
-  //   value: 0,
-  //   format: '(.ddd)',
-  // });
-
   var table = $('#table1').DataTable(
     {
       "destroy": true,
@@ -647,6 +635,8 @@ function updateGauge(percentage, realisasi, target) {
       "info": false,
       "autoWidth": false,
       "ordering": false,
+      "processing": false,
+      "serverSide": false,
       "columnDefs": [
         { className: 'text-center', width: "10px", targets: [0] },
         { className: 'text-left', width: "150px",targets: [1] },
@@ -657,29 +647,35 @@ function updateGauge(percentage, realisasi, target) {
     }
   );
   var tableRefresh = function () {
-
-    table.clear();
     var url = "${url}".replace("/pajak/", "/grid/");
     $.get(url, {}, function (data, status) {
       if (status === "success") {
+        table.clear();
+        
         var sum_target = 0;
         var sum_realisasi = 0;
         var sum_sisa = 0;
         var sum_persen = 0;
+        var rowNumber = 1;
+        
         data.forEach(function (row) {
           table.row.add([
-            row.kode,
+            rowNumber,
             row.nama,
             row.target,
             row.realisasi,
             row.persen.toFixed(2),
             row.sisa,
           ]);
+          rowNumber++;
           sum_target += row.target;
           sum_realisasi += row.realisasi;
           sum_sisa += row.sisa;
           sum_persen += row.persen;
         });
+        
+        table.draw();
+        
         $('#sum_target').html(sum_target.toLocaleString("id-ID"));
         $('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID"));
         $('#sum_sisa').html(sum_sisa.toLocaleString("id-ID"));
@@ -692,8 +688,6 @@ function updateGauge(percentage, realisasi, target) {
         } else {
           updateGauge(40.99, 1508025096875, 3679068431493);
         }
-
-        table.draw();
       } else {
         table.draw();
       }
@@ -721,18 +715,18 @@ function updateGauge(percentage, realisasi, target) {
         
         setTimeout(function () {
             $().datarefresh();
-        }, 300000000000);
+        }, 300000);
 
       } else {
         setTimeout(function () {
             $().datarefresh();
-        }, 60000000000);
+        }, 60000);
       }
 
     }).fail(function () {
       setTimeout(function () {
         $().datarefresh();
-      }, 6000000000000);
+      }, 60000);
     });
   }
 </script>