banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: implement plugin datatable & sweetalert

main
Yuri Dimas 2025-11-04 22:41:55 +07:00
parent c751c92d4d
commit 6c05d22cbb
No known key found for this signature in database
GPG Key ID: 4A421F9108FB5D2C
2 changed files with 126 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
Areas/Dinas/Controllers/KecamatanController.cs
View File

@ -3,11 +3,75 @@
namespace BankSampahApp.Areas.Dinas.Controllers
{
[Area("Dinas")]
[Route("Dinas/[controller]/[action]")]
public class KecamatanController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult Table()
{
var data = new[]
{
new {
kode = "81630",
kecamatan = "Kepulauan Seribu",
kabupaten = "Kota Adm Kepulauan Seribu",
provinsi = "DKI Jakarta",
latitude = "-6.2088, 106.8456Jeruk",
longitude = "106.8456° E",
},
new {
kode = "81631",
kecamatan = "Jakarta Timur",
kabupaten = "Kota Adm Jakarta Timur",
provinsi = "DKI Jakarta",
latitude = "-6.2088, 106.8456",
longitude = "106.8456° E",
},
new {
kode = "81632",
kecamatan = "Jakarta Utara",
kabupaten = "Kota Adm Jakarta Utara",
provinsi = "DKI Jakarta",
latitude = "-6.2088, 106.8456",
longitude = "106.8456° E",
},
new {
kode = "81633",
kecamatan = "Jakarta Barat",
kabupaten = "Kota Adm Jakarta Barat",
provinsi = "DKI Jakarta",
latitude = "-6.2088, 106.8456",
longitude = "106.8456° E",
},
new {
kode = "81634",
kecamatan = "Jakarta Pusat",
kabupaten = "Kota Adm Jakarta Pusat",
provinsi = "DKI Jakarta",
latitude = "-6.2088, 106.8456Baru",
longitude = "106.8456° E",
},
new {
kode = "81635",
kecamatan = "Jakarta Selatan",
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);
}
}
}

111
Areas/Dinas/Views/Kecamatan/Index.cshtml
View File

@ -14,13 +14,11 @@
<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">
<table class="table-zebra table" id="example">
<!-- head -->
<thead>
<tr>
<th class="w-[5%]"></th>
<th class="w-[5%]">No</th>
<th class="w-[10%]">Kode</th>
<th class="w-[15%]">Nama Kecamatan</th>
<th class="w-[15%]">Nama Kabupaten</th>
@ -29,64 +27,53 @@
<th class="w-[15%]">Longitude</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>81635</td>
<td>Jakarta Selatan</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>Jakarta Pusat</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>Jakarta Barat</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>Jakarta Timur</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>Jakarta Utara</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>Kepulauan Seribu</td>
<td>Kota Adm Kepulauan Seribu</td>
<td>DKI Jakarta</td>
<td>-6.2088, 106.8456</td>
<td>106.8456° E</td>
</tr>
</tbody>
<tbody></tbody>
</table>
</div>
<partial name="~/Areas/Shared/Components/Table/_Pagination.cshtml" />
</div>
</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/Kecamatan/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: 'kecamatan' },
{ 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>