From c751c92d4d09fadc86b3c18becef8b373cb41bd2 Mon Sep 17 00:00:00 2001
From: Yuri Dimas <yuri@impstudio.co.id>
Date: Tue, 4 Nov 2025 22:38:13 +0700
Subject: [PATCH] style: implement plugin datatable & sweetalert

---
 Areas/Dinas/Controllers/KotaController.cs |  58 ++++++++++
 Areas/Dinas/Views/Kota/Index.cshtml       | 128 ++++++++++------------
 2 files changed, 118 insertions(+), 68 deletions(-)

diff --git a/Areas/Dinas/Controllers/KotaController.cs b/Areas/Dinas/Controllers/KotaController.cs
index 7db97d9..bf741a1 100644
--- a/Areas/Dinas/Controllers/KotaController.cs
+++ b/Areas/Dinas/Controllers/KotaController.cs
@@ -3,11 +3,69 @@
 namespace BankSampahApp.Areas.Dinas.Controllers
 {
     [Area("Dinas")]
+    [Route("Dinas/[controller]/[action]")]
     public class KotaController : Controller
     {
         public IActionResult Index()
         {
             return View();
         }
+
+        [HttpGet]
+        public IActionResult Table()
+        {
+            var data = new[]
+            {
+                new {
+                    kode = "81630",
+                    kabupaten = "Kota Adm Kepulauan Seribu",
+                    provinsi = "DKI Jakarta",
+                    latitude = "-6.2088, 106.8456Jeruk",
+                    longitude = "106.8456° E",
+                },
+                new {
+                    kode = "81631",
+                    kabupaten = "Kota Adm Jakarta Timur",
+                    provinsi = "DKI Jakarta",
+                    latitude = "-6.2088, 106.8456",
+                    longitude = "106.8456° E",
+                },
+                new {
+                    kode = "81632",
+                    kabupaten = "Kota Adm Jakarta Utara",
+                    provinsi = "DKI Jakarta",
+                    latitude = "-6.2088, 106.8456",
+                    longitude = "106.8456° E",
+                },
+                new {
+                    kode = "81633",
+                    kabupaten = "Kota Adm Jakarta Barat",
+                    provinsi = "DKI Jakarta",
+                    latitude = "-6.2088, 106.8456",
+                    longitude = "106.8456° E",
+                },
+                new {
+                    kode = "81634",
+                    kabupaten = "Kota Adm Jakarta Pusat",
+                    provinsi = "DKI Jakarta",
+                    latitude = "-6.2088, 106.8456Baru",
+                    longitude = "106.8456° E",
+                },
+                new {
+                    kode = "81635",
+                    kabupaten = "Kota Adm Jakarta Selatan",
+                    provinsi = "DKI Jakarta",
+                    latitude = "-6.2088, 106.8456",
+                    longitude = "106.8456° E",
+                },
+            };
+
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
     }
 }
diff --git a/Areas/Dinas/Views/Kota/Index.cshtml b/Areas/Dinas/Views/Kota/Index.cshtml
index 25dc385..2551eb5 100644
--- a/Areas/Dinas/Views/Kota/Index.cshtml
+++ b/Areas/Dinas/Views/Kota/Index.cshtml
@@ -14,72 +14,64 @@
 
 <div class="card bg-white">
     <div class="card-body p-2">
-        <partial name="~/Areas/Shared/Components/Table/_Control.cshtml" />
-        <div class="overflow-x-auto">
-            <table class="table-zebra table">
-                <!-- head -->
-                <thead>
-                    <tr>
-                        <th class="w-[5%]"></th>
-                        <th class="w-[10%]">Kode</th>
-                        <th class="w-[30%]">Nama Kabupaten</th>
-                        <th class="w-[25%]">Provinsi</th>
-                        <th class="w-[15%]">Latitude</th>
-                        <th class="w-[15%]">Longitude</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <th>1</th>
-                        <td>81635</td>
-                        <td>Kota Adm Jakarta Selatan</td>
-                        <td>DKI Jakarta</td>
-                        <td>-6.2088, 106.8456</td>
-                        <td>106.8456° E</td>
-                    </tr>
-                    <tr>
-                        <th>2</th>
-                        <td>81634</td>
-                        <td>Kota Adm Jakarta Pusat</td>
-                        <td>DKI Jakarta</td>
-                        <td>-6.2088, 106.8456</td>
-                        <td>106.8456° E</td>
-                    </tr>
-                    <tr>
-                        <th>3</th>
-                        <td>81633</td>
-                        <td>Kota Adm Jakarta Barat</td>
-                        <td>DKI Jakarta</td>
-                        <td>-6.2088, 106.8456</td>
-                        <td>106.8456° E</td>
-                    </tr>
-                    <tr>
-                        <th>4</th>
-                        <td>81631</td>
-                        <td>Kota Adm Jakarta Timur</td>
-                        <td>DKI Jakarta</td>
-                        <td>-6.2088, 106.8456</td>
-                        <td>106.8456° E</td>
-                    </tr>
-                    <tr>
-                        <th>5</th>
-                        <td>81632</td>
-                        <td>Kota Adm Jakarta Utara</td>
-                        <td>DKI Jakarta</td>
-                        <td>-6.2088, 106.8456</td>
-                        <td>106.8456° E</td>
-                    </tr>
-                    <tr>
-                        <th>6</th>
-                        <td>81630</td>
-                        <td>Kota Adm Kepulauan Seribu</td>
-                        <td>DKI Jakarta</td>
-                        <td>-6.2088, 106.8456</td>
-                        <td>106.8456° E</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-        <partial name="~/Areas/Shared/Components/Table/_Pagination.cshtml" />
+        <table class="table-zebra table" id="example">
+            <!-- head -->
+            <thead>
+                <tr>
+                    <th class="w-[5%]">No</th>
+                    <th class="w-[10%]">Kode</th>
+                    <th class="w-[30%]">Nama Kabupaten</th>
+                    <th class="w-[25%]">Provinsi</th>
+                    <th class="w-[15%]">Latitude</th>
+                    <th class="w-[15%]">Longitude</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
+<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
+<script type="text/javascript">
+    var table;
+
+    $(document).ready(function () {
+        table = new DataTable('#example', {
+            ajax: '/Dinas/Kota/Table',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: function () {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'kode' },
+                { data: 'kabupaten' },
+                { data: 'provinsi' },
+                { data: 'latitude' },
+                { data: 'longitude' },            ]
+        });
+
+        table.on("click", ".delete", function (e) {
+            e.preventDefault();
+
+            let url = $(this).data("url");
+            swal.fire({
+                title: "Apakah anda yakin?",
+                text: "Data yang dihapus tidak dapat dikembalikan lagi",
+                icon: "question",
+                showCancelButton: true,
+                confirmButtonText: "Ya, Hapus",
+                cancelButtonText: "Batal",
+                buttonsStyling: false,
+                customClass: {
+                    confirmButton: "btn btn-error text-white",
+                    cancelButton: "btn btn-link no-underline text-gray-500",
+                },
+            });
+        });
+    });
+</script>
\ No newline at end of file