style: implement plugin datatable & sweetalert

main
Yuri Dimas 2025-11-04 23:14:46 +07:00
parent bfb8b5bf0d
commit 0e3af0f7eb
No known key found for this signature in database
GPG Key ID: 4A421F9108FB5D2C
2 changed files with 106 additions and 77 deletions

View File

@ -3,11 +3,62 @@
namespace BankSampahApp.Areas.Dinas.Controllers
{
[Area("Dinas")]
[Route("Dinas/[controller]/[action]")]
public class BadanHukumController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult Table()
{
var data = new[]
{
new {
nama = "PT",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
"<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
"</div>",
},
new {
nama = "Koperasi",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
"<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
"</div>",
},
new {
nama = "Yayasan",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
"<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
"</div>",
},
new {
nama = "BUMD",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
"<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
"</div>",
},
new {
nama = "BULD",
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-circle btn-warning text-white btn-sm\"><i class=\"ph ph-note-pencil\"></i></a>" +
"<a href=\"#\" class=\"btn btn-circle btn-error delete text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
"</div>",
},
};
var response = new
{
data = data
};
return Json(response);
}
}
}

View File

@ -21,81 +21,59 @@
<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%]">No</th>
<th class="w-[85%]">Nama Badan Hukum</th>
<th class="w-[10%]">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>PT</td>
<td>
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
<i class="ph ph-note-pencil"></i>
</a>
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
<i class="ph ph-trash"></i>
</a>
</td>
</tr>
<tr>
<th>2</th>
<td>Koperasi</td>
<td>
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
<i class="ph ph-note-pencil"></i>
</a>
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
<i class="ph ph-trash"></i>
</a>
</td>
</tr>
<tr>
<th>3</th>
<td>Yayasan</td>
<td>
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
<i class="ph ph-note-pencil"></i>
</a>
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
<i class="ph ph-trash"></i>
</a>
</td>
</tr>
<tr>
<th>4</th>
<td>BUMD</td>
<td>
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
<i class="ph ph-note-pencil"></i>
</a>
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
<i class="ph ph-trash"></i>
</a>
</td>
</tr>
<tr>
<th>5</th>
<td>BULD</td>
<td>
<a href="#" class="btn btn-circle btn-warning btn-sm text-white">
<i class="ph ph-note-pencil"></i>
</a>
<a href="#" class="btn btn-circle btn-error btn-sm text-white">
<i class="ph ph-trash"></i>
</a>
</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-[85%]">Nama Badan Hukum</th>
<th class="w-[10%]">Aksi</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</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/BadanHukum/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: 'nama' },
{ data: 'aksi' },
]
});
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>