115 lines
4.0 KiB
Plaintext
115 lines
4.0 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Rincian Target Rumah Memilah";
|
|
}
|
|
|
|
<div class="breadcrumbs text-sm">
|
|
<ul>
|
|
<li class="text-gray-500"><a>Laporan</a></li>
|
|
<li>Rincian Target Rumah Memilah</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
|
<div class="prose">
|
|
<h3 class="mb-2">Rincian Target Rumah Memilah</h3>
|
|
</div>
|
|
<div class="justify-self-end lg:self-center">
|
|
<a class="btn btn-primary text-white rounded-full" href="#">
|
|
<span class="icon icon-fill me-2">download</span>
|
|
Download
|
|
</a>
|
|
<button class="btn bg-white rounded-full" type="button">
|
|
<span class="icon icon-fill me-2">filter_list</span>
|
|
Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="h-8"></div>
|
|
|
|
<div class="card bg-white shadow-sm">
|
|
<div class="card-body p-0">
|
|
<table class="table-zebra table" id="target-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="w-[5%]">No</th>
|
|
<th class="w-[35%]">Wilayah</th>
|
|
<th class="w-[20%]">Jumlah PJLP Pendamping BPS RW</th>
|
|
<th class="w-[20%]">Target Rumah Memilah per Bulan</th>
|
|
<th class="w-[20%]">Target Rumah Memilah 8 Bulan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/rowgroup/1.5.0/css/rowGroup.dataTables.min.css" />
|
|
<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/rowgroup/1.5.0/js/dataTables.rowGroup.min.js"></script>
|
|
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
function formatNumber(value) {
|
|
const number = Number(value ?? 0);
|
|
return number.toLocaleString('id-ID');
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
new DataTable('#target-table', {
|
|
ajax: '@Url.Action("Table", "RincianTargetRumahMemilah")',
|
|
scrollX: true,
|
|
autoWidth: false,
|
|
rowGroup: {
|
|
dataSrc: 'wilayah',
|
|
startRender: function (rows, group) {
|
|
const firstRow = rows.data()[0];
|
|
const row = $('<tr/>').addClass('bg-gray-50 font-semibold text-gray-800');
|
|
|
|
row.append(`<td class="align-middle">${firstRow.no}</td>`);
|
|
row.append(`<td class="align-middle">${group}</td>`);
|
|
row.append(`<td class="align-middle">${formatNumber(firstRow.total_jumlah_pjlp)}</td>`);
|
|
row.append(`<td class="align-middle">${formatNumber(firstRow.total_target_bulan)}</td>`);
|
|
row.append(`<td class="align-middle">${formatNumber(firstRow.total_target_8_bulan)}</td>`);
|
|
|
|
return row;
|
|
}
|
|
},
|
|
columns: [
|
|
{
|
|
data: 'row_number',
|
|
orderable: false,
|
|
searchable: false,
|
|
render: function (data) {
|
|
return data || '';
|
|
}
|
|
},
|
|
{ data: 'kelurahan', defaultContent: '-' },
|
|
{
|
|
data: 'jumlah_pjlp',
|
|
render: function (data) {
|
|
return formatNumber(data);
|
|
}
|
|
},
|
|
{
|
|
data: 'target_bulan',
|
|
render: function (data) {
|
|
return formatNumber(data);
|
|
}
|
|
},
|
|
{
|
|
data: 'target_8_bulan',
|
|
render: function (data) {
|
|
return formatNumber(data);
|
|
}
|
|
}
|
|
],
|
|
order: [[0, 'asc']],
|
|
columnDefs: [
|
|
{ targets: '_all', className: 'align-middle' }
|
|
]
|
|
});
|
|
});
|
|
</script> |