chore: move script from include to index

main-dlh
Yuri Dimas 2025-11-17 15:42:21 +07:00
parent 1c9140d179
commit ecc272c48d
2 changed files with 75 additions and 72 deletions

View File

@ -49,3 +49,75 @@
@await Html.PartialAsync("_TabIndexLokasi")
</div>
</div>
@section Scripts {
<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="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$(document).ready(function () {
// Datatable setup
var tableLokasi = new DataTable('#tableLokasi', {
ajax: '@Url.Action("TableLokasi", "ProfilRw")',
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: 'usulan' },
{ data: 'alamat' },
{ data: 'statusLahan' },
{ data: 'pemilikLahan' },
{ data: 'luasLahan' },
{
data: 'statusUsulan',
render: (data) => `
<span class="badge rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
${data}
</span>`
},
{
data: null,
className: "text-center",
render: (data, type, row) => `
<div class="flex justify-center gap-2">
<button class="btn btn-xs btn-outline btn-detail rounded-full border-gray-300 text-gray-700 hover:bg-gray-50" data-id="${row.id}">Detail</button>
<button class="btn btn-xs btn-outline btn-edit rounded-full border-gray-300 text-gray-700 hover:bg-gray-50" data-id="${row.id}">Edit</button>
<button class="btn btn-xs btn-outline btn-delete rounded-full border-red-300 text-red-600 hover:bg-red-50" data-id="${row.id}">Delete</button>
</div>
`,
orderable: false,
searchable: false
}
]
});
// Delete Button
tableLokasi.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) => {
Swal.fire(
'Terhapus!',
'Data berhasil dihapus.',
'success'
);
});
});
});
</script>
}

View File

@ -6,7 +6,7 @@
</button>
</div>
<div class="overflow-x-auto">
<table class="table-zebra table w-full text-sm" id="lokasiTable">
<table class="table-zebra table w-full text-sm" id="tableLokasi">
<thead>
<tr>
<th class="w-[5%]">No</th>
@ -110,72 +110,3 @@
</form>
</div>
</dialog>
<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="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$(document).ready(function () {
// Datatable setup
const table = new DataTable('#lokasiTable', {
ajax: '@Url.Action("TableLokasi", "ProfilRw")',
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: 'usulan' },
{ data: 'alamat' },
{ data: 'statusLahan' },
{ data: 'pemilikLahan' },
{ data: 'luasLahan' },
{
data: 'statusUsulan',
render: (data) => `
<span class="badge rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-700">
${data}
</span>`
},
{
data: null,
className: "text-center",
render: (data, type, row) => `
<div class="flex justify-center gap-2">
<button class="btn btn-xs btn-outline btn-detail rounded-full border-gray-300 text-gray-700 hover:bg-gray-50" data-id="${row.id}">Detail</button>
<button class="btn btn-xs btn-outline btn-edit rounded-full border-gray-300 text-gray-700 hover:bg-gray-50" data-id="${row.id}">Edit</button>
<button class="btn btn-xs btn-outline btn-delete rounded-full border-red-300 text-red-600 hover:bg-red-50" data-id="${row.id}">Delete</button>
</div>
`,
orderable: false,
searchable: false
}
]
});
// 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) => {
Swal.fire(
'Terhapus!',
'Data berhasil dihapus.',
'success'
);
});
});
});
</script>