banksampah
/
bps-rw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add delelte button with sweetalert, and change style button

main-dlh
Regiaaaaaa 2025-11-12 16:32:13 +07:00
parent af0643f51e
commit 585c075274
1 changed files with 62 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
Views/Lokasi/Index.cshtml
View File

@ -72,6 +72,7 @@
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
@ -100,11 +101,11 @@
{ {
data: null, data: null,
className: "text-center", className: "text-center",
render: () => ` render: (data, type, row) => `
<div class="flex justify-center gap-2"> <div class="flex justify-center gap-2">
<button class="btn btn-xs bg-gray-200 text-gray-800 rounded-full hover:bg-gray-300">Detail</button> <button class="btn btn-xs btn-outline border-gray-300 text-gray-700 rounded-full hover:bg-gray-50 btn-detail" data-id="${row.id}">Detail</button>
<button class="btn btn-xs bg-blue-500 text-white rounded-full hover:bg-blue-600">Edit</button> <button class="btn btn-xs btn-outline border-gray-300 text-gray-700 rounded-full hover:bg-gray-50 btn-edit" data-id="${row.id}">Edit</button>
<button class="btn btn-xs bg-red-500 text-white rounded-full hover:bg-red-600">Hapus</button> <button class="btn btn-xs btn-outline border-red-300 text-red-600 rounded-full hover:bg-red-50 btn-delete" data-id="${row.id}">Delete</button>
</div> </div>
`, `,
orderable: false, orderable: false,
@ -133,5 +134,62 @@
$('#formTambahLokasi')[0].reset(); $('#formTambahLokasi')[0].reset();
}); });
}); });
// Edit button handler
$('#lokasiTable').on('click', '.btn-edit', function () {
const id = $(this).data('id');
$.get('@Url.Action("GetById", "Lokasi")', { id: id }, function (data) {
$('#modal-tambah input[name="id"]').val(data.id);
$('#modal-tambah input[name="usulan"]').val(data.usulan);
$('#modal-tambah input[name="alamat"]').val(data.alamat);
$('#modal-tambah input[name="statusLahan"]').val(data.statusLahan);
$('#modal-tambah input[name="pemilikLahan"]').val(data.pemilikLahan);
$('#modal-tambah input[name="luasLahan"]').val(data.luasLahan);
$('#modal-tambah select[name="statusUsulan"]').val(data.statusUsulan);
// Open modal
$('#modal-tambah').prop('checked', true);
});
});
// Delete Button
$('#lokasiTable').on('click', '.btn-delete', function () {
const id = $(this).data('id');
Swal.fire({
title: 'Apakah Anda yakin?',
text: "Data yang dihapus tidak dapat dikembalikan!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#ef4444',
cancelButtonColor: '#6b7280',
confirmButtonText: 'Ya, Hapus!',
cancelButtonText: 'Batal'
}).then((result) => {
if (result.isConfirmed) {
$.post('@Url.Action("Delete", "Lokasi")', { id: id }, function () {
table.ajax.reload();
Swal.fire(
'Terhapus!',
'Data berhasil dihapus.',
'success'
);
}).fail(function () {
Swal.fire(
'Gagal!',
'Terjadi kesalahan saat menghapus data.',
'error'
);
});
}
});
});
// Detail button handler
$('#lokasiTable').on('click', '.btn-detail', function () {
const id = $(this).data('id');
console.log('Detail clicked for ID:', id);
});
}); });
</script> </script>