[update] Responsive Data Table
This commit is contained in:
Zhaqian Rouf Alfauzi
parent
6a0dbdbc5f
commit
e24c1c3195
|
|
@ -29,7 +29,6 @@
|
|||
<h5 class="card-title">Munaqosah Santri</h5>
|
||||
|
||||
<!-- Tabel Riwayat -->
|
||||
<!-- Tabel Riwayat -->
|
||||
<table id="dataTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -46,7 +45,6 @@
|
|||
<tbody>
|
||||
@foreach($riwayat as $item)
|
||||
<tr>
|
||||
<!-- Asumsikan Anda punya relasi ke Tabel User untuk nama, jenkel, asal -->
|
||||
<td>{{ $item->user->name ?? '—' }}</td>
|
||||
<td>{{ $item->created_at->format('Y-m-d') }}</td>
|
||||
<td>{{ $item->tahun_angkatan }}</td>
|
||||
|
|
@ -55,7 +53,6 @@
|
|||
<td>{{ number_format($item->nilai_n, 2) }}</td>
|
||||
<td>{{ $item->status }}</td>
|
||||
<td>
|
||||
<!-- misal admin bisa verifikasi, dsb. -->
|
||||
<a href="#" class="btn btn-success btn-sm">
|
||||
<i class='bx bxs-check-circle'></i> Verifikasi
|
||||
</a>
|
||||
|
|
@ -68,11 +65,20 @@
|
|||
<!-- DataTables CSS & JS -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<!-- Tambahkan CSS Responsive -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<!-- Tambahkan JS Responsive -->
|
||||
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#dataTable').DataTable({
|
||||
responsive: true, // Aktifkan fitur responsif
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
|
|
@ -90,5 +96,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@endsection
|
||||
|
|
@ -63,6 +63,8 @@
|
|||
@if($latest)
|
||||
<div class="card-footer text-center p-4">
|
||||
<h5 class="mb-3 fw-bold">Hasil Terakhir</h5>
|
||||
<!-- Membuat tabel responsif -->
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered text-start">
|
||||
<tr>
|
||||
<th><i class="bx bx-calendar"></i> Tanggal</th>
|
||||
|
|
@ -162,9 +164,9 @@
|
|||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Debug (opsional) --}}
|
||||
{{-- <script>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@
|
|||
<div class="card-body">
|
||||
<h5 class="card-title">Riwayat Hitung</h5>
|
||||
|
||||
<!-- Tabel Riwayat -->
|
||||
<!-- Membungkus tabel dengan div.table-responsive -->
|
||||
<div class="table-responsive">
|
||||
<table id="riwayatTable" class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -60,16 +61,19 @@
|
|||
<!-- Kolom Aksi -->
|
||||
<td>
|
||||
<!-- Tombol Hapus -->
|
||||
<form action="{{ route('riwayat.destroy', $item->id) }}" method="POST" style="display:inline;">
|
||||
<form action="{{ route('riwayat.destroy', $item->id) }}" method="POST"
|
||||
style="display:inline;">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Yakin ingin menghapus data ini?')">
|
||||
<button type="submit" class="btn btn-danger btn-sm"
|
||||
onclick="return confirm('Yakin ingin menghapus data ini?')">
|
||||
<i class='bx bxs-trash'></i> Hapus
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Tombol Kirim -->
|
||||
<a href="{{ route('riwayat.send', $item->id) }}" class="btn btn-primary btn-sm">
|
||||
<a href="{{ route('riwayat.send', $item->id) }}"
|
||||
class="btn btn-primary btn-sm">
|
||||
<i class='bx bxs-send'></i> Kirim
|
||||
</a>
|
||||
</td>
|
||||
|
|
@ -77,15 +81,22 @@
|
|||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- End of .table-responsive -->
|
||||
|
||||
<!-- DataTables CSS & JS -->
|
||||
<!-- DataTables CSS & JS beserta extension Responsive -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
||||
<script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js">
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('#riwayatTable').DataTable({
|
||||
responsive: true,
|
||||
"language": {
|
||||
"search": "Cari:",
|
||||
"lengthMenu": "Tampilkan _MENU_ data",
|
||||
|
|
|
|||
Loading…
Reference in New Issue