Misi gan numpang tanya lagi, kalau mau nampilin data table sesuai pilihan dropdown (misalkan opsi A, B, dan C) dan di tampilan awal langsung tampilin salah satu opsi tablenya (misalkan table C) tanpa seluruh data ikut ditampilkan itu gmn ya gan?
Code:
<!DOCTYPE html>
<head>
<style>
/*This CSS is only for demo purposes */
table, td, th {border: 1px solid; width:751px}
th {background-color: #eaeaea;}
th, td {padding: 12px;}
select {margin: 1em 0;}
</style>
</head>
<body>
<select id="choice">
<option value="all" selected>All</option>
<option value="oct">October</option>
</select>
<table id="table">
<thead>
<tr>
<th>Deskripsi</th>
<th>Debet</th>
<th>Kredit</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="all">
<td>Penjualan</td>
<td>Rp.500.000,-</td>
<td>Rp.0,-</td>
<td>Rp.500.000,-</td>
</tr>
<tr class="all">
<td>Lelang</td>
<td>Rp.250.000,-</td>
<td>Rp.0,-</td>
<td>Rp.250.000,-</td>
</tr>
<tr class="all">
<td>Pemasukan Lain-lain</td>
<td>Rp.100.000,-</td>
<td>Rp.0,-</td>
<td>Rp.100.000,-</td>
</tr>
<tr class="all">
<td>Tagihan</td>
<td>Rp.0,-</td>
<td>Rp.500.000,-</td>
<td>Rp.500.000,-</td>
</tr>
<tr class="all">
<td>Operasional</td>
<td>Rp.0,-</td>
<td>Rp.50.000,-</td>
<td>Rp.50.000,-</td>
</tr>
<tr class="all">
<td>Pengeluaran Lain-lain</td>
<td>Rp.0,-</td>
<td>Rp.0,-</td>
<td>Rp.0,-</td>
</tr>
<tr class="oct">
<td>Penjualan</td>
<td>Rp.250.000,-</td>
<td>Rp.0,-</td>
<td>Rp.250.000,-</td>
</tr>
<tr class="oct">
<td>Lelang</td>
<td>Rp.100.000,-</td>
<td>Rp.0,-</td>
<td>Rp.100.000,-</td>
</tr>
<tr class="oct">
<td>Pemasukan Lain-lain</td>
<td>Rp.30.000,-</td>
<td>Rp.0,-</td>
<td>Rp.30.000,-</td>
</tr>
<tr class="oct">
<td>Tagihan</td>
<td>Rp.0,-</td>
<td>Rp.300.000,-</td>
<td>Rp.300.000,-</td>
</tr>
<tr class="oct">
<td>Operasional</td>
<td>Rp.0,-</td>
<td>Rp.25.000,-</td>
<td>Rp.25.000,-</td>
</tr>
<tr class="oct">
<td>Pengeluaran Lain-lain</td>
<td>Rp.0,-</td>
<td>Rp.0,-</td>
<td>Rp.0,-</td>
</tr>
</tbody>
</table>
</body>
[removed][removed]
[removed][removed]
[removed]
//here is the custom JS we would like to add
$("#choice").change(function() {
$("#table tbody tr").hide();
$("#table tbody tr." + $(this).val()).show("fast");
});
//this JS calls the tablesorter plugin that we already use on our site
$("#table").tablesorter({ sortList: [[0, 0]] });
[removed]
</html>
Tampilan awal semuanya ikut ditampilkan datanya.
Ini kalau opsi oktober aja.
Opsi yang all, yg mau ditampilkan di awal maksudnya seperti ini aja.