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 23:06:31 +07:00
parent d7894331a3
commit 8416e93557
No known key found for this signature in database
GPG Key ID: 4A421F9108FB5D2C
2 changed files with 113 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
Areas/Dinas/Controllers/AktivitasController.cs
View File

@ -3,11 +3,69 @@
namespace BankSampahApp.Areas.Dinas.Controllers
{
[Area("Dinas")]
[Route("Dinas/[controller]/[action]")]
public class AktivitasController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult Table()
{
var data = new[]
{
new {
nama = "Pemilahan",
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 = "Pengumpulan",
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 = "Pengolahan",
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 = "Pemilahan",
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 = "Pemilahan",
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 = "Pemilahan",
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);
}
}
}

126
Areas/Dinas/Views/Aktivitas/Index.cshtml
View File

@ -21,93 +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">
<table class="table-zebra table" id="example">
<!-- head -->
<thead>
<tr>
<th class="w-[5%]"></th>
<th class="w-[5%]">No</th>
<th class="w-[85%]">Nama Aktivitas</th>
<th class="w-[10%]">Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Pemilahan</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>Pengumpulan</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>Pengolahan</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>Pemilahan</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>Pemilahan</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>6</th>
<td>Pemilahan</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>
<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/Aktivitas/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>