javascript - 无法从javascript中的数据表服务器端调用CSS类

Question

我的案子需要你的帮助。我在使用数据表服务器端时遇到问题，javascript 无法调用类“open_modal”。

如果我使用通用数据表并使用 php 显示数据，则 open_modal 类可以正常工作。

数据的结果和这个例子完全一样，在这个例子中我们可以调用open_modal类。如果我使用数据表服务器端则不起作用。 My Example Open Modal with JS

你能帮帮我吗？谢谢。

数据表代码:

$('#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">Cannot display the data.</th></tr></tbody>');
        }
    }
});

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;

耶!自己解决! ^_^我用 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'});
        }
    });
}}

Answer 1

你可以试试这个关于表数据列表的代码。数据表中有“Count”、“Code”、“Name”、“Status”、“Oppo”等不同的列。

           "ajax": {
             "url": 'URL',
             "type": 'POST',
             "dataSrc": function (Jsondata) {
                var dataArray = [];
                for (key in Jsondata.data) {
                   dataArray.push({
                     "Count": Jsondata.data[key].ListCount,
                     "Code": Jsondata.data[key].Code,
                     "Name": '<a href="javascript:;" class="open_modal ' + 
                              Jsondata.data[key].Status + '" onclick=fnView("' 
                              + Jsondata.data[key].ID + '","' + 
                             Jsondata.data[key].ID1 + '")>EDIT</a>',
                    "Status": Jsondata.data[key].Status,                                
                    "Oppo": Jsondata.data[key].Opp
                    });
                }
                return dataArray;
             }