Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Tidak dapat memanggil class CSS dari datatable serverside
Code datatable:
$('#datatable-serverside').DataTable({
"iDisplayLength": 5,
"aLengthMenu": [[5, 25, 50, 100, -1], [5, 25, 50, 100, "All"]],
"bProcessing": true,
"serverSide": true,
"ajax": {
url: "supplier/response.php", // json datasource
type: "post", // type of method ,GET/POST/DELETE
"dataSrc": function (jsonData) {
for (var i = 0, len = jsonData.data.length; i < len; i++) {
jsonData.data[i][2] = jsonData.data[i][2] + '<br>' + jsonData.data[i][3];
jsonData.data[i][3] = jsonData.data[i][4];
jsonData.data[i][4] = '<button type="button" class="open_modal btn btn-success" id_supplier="' + jsonData.data[i][5] + '" title="Edit"><i class="fa fa-edit"></i> Edit</button>';
}
return jsonData.data;
},
error: function () {
$("#supplier_grid").append('<tbody><tr><th colspan="5">Tidak ditemukan data di server.</th></tr></tbody>');
}
}
});
$('#datatable-biasa').DataTable({
"iDisplayLength": 5,
"aLengthMenu": [[5, 25, 50, 100, -1], [5, 25, 50, 100, "All"]]
});
Code javascript:
var $lba = document.getElementsByClassName('open_modal');
function myPopup() {
var m = $(this).attr("id_supplier");
$.ajax({
url: "supplier/modal_edit.php",
type: "GET",
data: {id: m, },
success: function (ajaxData) {
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show', {backdrop: 'true'});
}
});
}
for (var i = 0; i < $lba.length; i++)
$lba[i].onclick = myPopup;
Class yang saya panggil adalah class: open_modal Script ini dapat berjalan dengan baik apabila menggunakan datatable biasa seperti di dalam script php berikut:
<table id="datatable-biasa" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>No</th>
<th>Nama Supplier</th>
<th>Telepon</th>
<th>Alamat</th>
<th>Aktif</th>
<th>Pilihan</th>
</tr>
</thead>
<tbody>
<?php
$tampil = mysqli_query($con, "SELECT * FROM supplier WHERE aktif <> 'Deleted' ORDER BY aktif ASC, nama_supplier ASC");
$no = 1;
while ($r = mysqli_fetch_array($tampil)) {
if ($r[telepon1] == "") {
$tel = "-";
} else {
$tel = $r[telepon1];
}
if ($r[telepon2] == "") {
$tel2 = "-";
} else {
$tel2 = $r[telepon2];
}
echo "<tr>
<td>$no</td>
<td>$r[nama_supplier]</td>
<td>$tel<br>$tel2</td>
<td>$r[alamat]</td>
<td>$r[aktif]</td>
<td>";
?>
<button type="button" class="open_modal btn btn-success" id_supplier="<?php echo $r[id_supplier]; ?>" title="Edit"><i class="fa fa-edit"></i> Edit</button>
<?php
echo "</td></tr>";
$no++;
}
?>
</tbody>
</table>
<!-- Form Edit Data-->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- End Form Edit Data-->
Namun jika menggunakan datatable server side seperti di dalam kode script php berikut tidak bisa,
<table id="datatable-serverside" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Nama Supplier</th>
<th>Alamat</th>
<th>Telepon</th>
<th>Aktif</th>
<th>Pilihan</th>
</tr>
</thead>
</table>
<!-- Form Edit Data-->
<div id="ModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<!-- End Form Edit Data-->
Mohon bantuannya. Terima kasih.
2 Jawaban:
Jawaban Terpilih
Finally, solved teman-teman sekalian. Diubah metode fungsinya, dari pemanggilan class jadi onclick.
jsonData.data[i][4] = '<button type="button" class="btn btn-success" onclick="editForm(\'ModalEdit\', \''+ jsonData.data[i][5] +'\')" title="Edit"><i class="fa fa-edit"></i> Edit</button>';
function editForm(id, value) {
var e = document.getElementById(id);
if (e.style.display == 'none') {
var m = value;
$.ajax({
url: "modul/mod_supplier/modal_edit.php",
type: "GET",
data: {id: m, },
success: function (ajaxData) {
$("#ModalEdit").html(ajaxData);
$("#ModalEdit").modal('show', {backdrop: 'true'});
}
});
}}
makasih udah mau share jawabannya, ditandain aja jadi jawaban yang benar, biar kalo ada yang punya kesalah sama, bisa ada referensi