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