I got bug when I use JQuery data-id in jQuery Datatables. For the first 10 (Ten) record working well. But when I click navigation table to enter to the second page, the data-id value not shown. Please see my code below :
<a href="#" class="btn bg-brown" data-toggle="modal" data-target="#modal_theme_custom"><i class="icon-plus2 pr-2"></i> Tambah Data</a>
<table class="table datatable-basic table-striped table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nama Jenis Obat</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$x = 1;
$sdata = mysqli_query($konek, "SELECT * FROM e_jnsobat ORDER BY nm_jnsobat ASC");
while($ddata = mysqli_fetch_array($sdata)) {
echo "
<tr>
<td class='text-center'>" . $x . ".</td>
<td>" . $ddata['nm_jnsobat'] . "</td>
<td class='text-center'>
<div class='btn-group'>
<a href='#' class='breadcrumb-elements-item dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
<i class='icon-grid3'></i>
</a>
<div class='dropdown-menu dropdown-menu-right' x-placement='bottom-end' style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(310px, 40px, 0px);'>
<a href='#' data-toggle='modal' data-target='#modalEdit' data-id='".$ddata['id_jnsobat']."' class='dropdown-item btedit'><i class='icon-pencil7'></i> Edit Data</a>
<div class='dropdown-divider'></div>
<a href='#' data-toggle='modal' data-target='#modalHapus' data-id='".$ddata['id_jnsobat']."' data-nama='".$ddata['nm_jnsobat']."' class='dropdown-item bthapus'><i class='icon-trash'></i> Hapus Data</a>
</div>
</div>
</td>
</tr>
";
$x++;
}
?>
</tbody>
</table>
<div id="modal_theme_custom" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header bg-brown">
<h6 class="modal-title">Tambah Data</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" class="form-control" name="nm_jnsobat" placeholder="Nama Jenis Obat" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="tambahin" class="btn bg-brown">Tambah Data</button>
</div>
</form>
</div>
</div>
</div>
<div id="modalEdit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-600">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body pb-0">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_edit">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" name="nm_jnsobat" class="form-control" placeholder="Nama Jenis Obat" id="nm_jnsobat" required>
</div>
<div class="form-group">
<div class="alert alert-warning">Pastikan data yang anda tambahkan adalah benar.</div>
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="editin" class="btn bg-teal-800">Edit Data</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalHapus" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_hapus">
<div class="modal-header bg-danger">
<h5 class="modal-title">Konfirmasi Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">Anda yakin akan menghapus data <b id="nm_jnsobat_hapus"></b>? Data yang sudah dihapus tidak bisa dikembalikan lagi.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="hapusin" class="btn bg-danger">Ya! Hapus permanen data</button>
</div>
</form>
</div>
</div>
</div>
And this is the javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.btedit').on('click', function() {
const id = $(this).data('id');
$('#id_jnsobat_edit').val(id);
console.log("Datanya : "+id);
$.ajax({
type: 'get',
url: "<?php echo docroot('ajax/jnsobat/'); ?>"+id,
async: false,
dataType: 'json',
success: function(data) {
//console.log("Datanya : "+data);
$('#nm_jnsobat').val(data[0].nm_jnsobat);
}
});
});
$('.bthapus').on('click', function() {
const id = $(this).data('id');
const nama = $(this).data('nama');
$('#id_jnsobat_hapus').val(id);
//$('#nm_userxx').val(nama);
document.getElementById("nm_jnsobat_hapus").innerHTML = nama;
//console.log("data : " + nama);
});
});
</script>
on the first 10 recode its work well, but when I click button to go to the second page of datatable navigation the data-id dosen’t work… I dont know where is the problem… sory about my English…
Advertisement
Answer
As per the comments above here is the answer…
The below only listens to click events that are rendered before the code is executed.
$('.bthapus').on('click', function() { ... });
Replacing that with the below listens to the click event on the entire document, so dynamically created elements (such as your table pagination) will be included.
$(document).on('click', '.btedit', function() {