Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja

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.

avatar oriewancu
@oriewancu

4 Kontribusi 2 Poin

Diperbarui 8 tahun yang lalu

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'});
        }
    });
}}
avatar oriewancu
@oriewancu

4 Kontribusi 2 Poin

Dipost 8 tahun yang lalu

makasih udah mau share jawabannya, ditandain aja jadi jawaban yang benar, biar kalo ada yang punya kesalah sama, bisa ada referensi

avatar hilmanski
@hilmanski

2699 Kontribusi 2140 Poin

Dipost 8 tahun yang lalu

Login untuk ikut Jawaban