Created
March 14, 2020 01:43
-
-
Save fbryo21/411f4f83ba5c3187e1eacb85c0873324 to your computer and use it in GitHub Desktop.
laravel crud with table
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div class="card mt-5"> | |
<div class="card-header text-center"> | |
CRUD Data Pegawai | |
</div> | |
<div class="card-body"> | |
<a href="/test/admin/pegawai/tambah" class="btn btn-primary">Input Pegawai Baru</a> | |
<a href="" class="btn btn-danger">Hapus</a> | |
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." class="form-control"> | |
<br/> | |
<br/> | |
<table class="table table-bordered table-hover table-striped"> | |
<thead> | |
<tr> | |
<th><input type="checkbox" onclick="checkAll(this)"></th> | |
<th>Foto</th> | |
<th>Nama</th> | |
<th>Alamat</th> | |
</tr> | |
</thead> | |
<tbody id="myTable"> | |
@foreach($pegawai as $p) | |
<tr> | |
<td><input type="checkbox" name="pegawai"></td> | |
<td><img width="150px" src="{{ url('/data_file/'.$p->file) }}"></td> | |
<td><a href="/test/admin/pegawai/edit/{{ $p->id }}">{{ $p->nama }}</a></td> | |
<td>{{ $p->alamat }}</td> | |
</tr> | |
@endforeach | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
<script> | |
// SHOW ROW BASED ON SEARCH TYPED | |
function myFunction() { | |
const filter = document.querySelector('#myInput').value.toUpperCase(); | |
const trs = document.querySelectorAll('#myTable tr:not(.header)'); | |
trs.forEach(tr => tr.style.display = [...tr.children].find(td => td.innerHTML.toUpperCase().includes(filter)) ? '' : 'none'); | |
} | |
// SELECT ALL ROW | |
function checkAll(parent) { | |
var child = document.getElementsByName('pegawai'); | |
for (var i = 0; i < child.length; i++) { | |
if (child[i] != parent) | |
child[i].checked = parent.checked; | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment