Postingan lainnya
data tabel di klik muncul halaman modal...
apakah bisa gan di php... ada data di tabel pas di klik 2 kali datanya muncul halaman seperti alert modal, apa bisa gan data tabel tersebut jadi button..... tanpa membuat button link
6 Jawaban:
bisa ko gan, waktu itu saya lagi pake framework materilize, di situ kan ada fitur modal jadi kalo textnya diklik nanti muncul modalnya.
Tinggal tambahin tag " data-target ='id modalnya' " sama property "modal-trigger" di class data itu
pake bootstrap juga bisa kayaknya kan ada fitur modal juga
di class data modal nya bukan gan? jadi gak usah di kasih button kan di <td></td> nya gan?
bisa di share gak gan source code nya hehe...
<pre> <table class="table table-datatable table-custom" id="example"> <thead> <tr>
&lt;th&gt;check&lt;/th&gt;
&lt;th&gt;Aksi&lt;/th&gt;
&lt;th&gt;No&lt;/th&gt;
&lt;th class="no-sort" data-toggle="modal"&gt;Cp_Cid&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Mate&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Hues&lt;/th&gt;
&lt;th class="no-sort"&gt;&lt;center&gt;Cp_Width&lt;/center&gt;&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Name&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Unit&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Cury&lt;/th&gt;
&lt;th class="no-sort"&gt;&lt;center&gt;Cp_Pack&lt;/center&gt;&lt;/th&gt;
&lt;th class="no-sort"&gt;&lt;center&gt;Cp_Price&lt;/center&gt;&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Date&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_Weight&lt;/th&gt;
&lt;th class="no-sort"&gt;Cp_CPrice&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;?php
while(($count&lt;$rpp) && ($i&lt;$tcount)) {
mssql_data_seek($result,$i);
$data = mssql_fetch_array($result);
?&gt;
&lt;tr&gt;
&lt;td&gt;&lt;center&gt;&lt;input type="checkbox" value="1" &lt;?php if($data['checkfield']=="1") echo "checked"; ?&gt;&gt;&lt;/center&gt;&lt;/td&gt;
&lt;td&gt;&lt;button type="button" class="btn-xs btn-info" data-id="cp_cid" &gt;Info&lt;/button&gt;&lt;/td&gt;
&lt;td &gt;&lt;center&gt;&lt;?php echo ++$no_urut;?&gt;&lt;/center&gt; &lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_cid']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_mate']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_hues']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_width']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_name']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_unit']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_cury']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_pack']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_price']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_date']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_weight']?&gt;&lt;/td&gt;
&lt;td&gt;&lt;?php echo $data['cp_cprice']?&gt;&lt;/td&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;?php
$i++;
$count++;
}
?&gt;
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="simpan btn btn-primary">Save changes</button> </div> </div> </div> </div> </tbody>
<script src="jquery-1.11.2.min.js"></script>
<script src="bootstrap.js"></script>
<script>
$(function(){
$(document).on('click','.btn-xs btn-info',function(e){
e.preventDefault();
$("#myModal").modal('show');
$.post('hasil.php',
{id:$(this).attr('data-id')},
function(html){
$(".modal-body").html(html);
}
);
});
});
</script> </pre>
misalnya <td> <?php echo $data['cp_cid']?> </td> Jadi <td class="modal-trigger" data-target="id-modal"> <?php echo $data['cp_cid']?> </td>
Tinggal dibikin modalnya gan mau nampilin apa aja di modalnya
Modalnya itu bentuk nya gimana? untuk melihat semua data detailnya ketika di klik INFO ? kalau untuk munculin modal tambahin <pre> <td data-toggle="modal" data-target="#myModal"> </pre> coba di rancang dulu modal body nya biar kita punya gambaran maksudnya gimana haha