Cannot call CSS class from datatable server side in javascript

Question

I need your help for my case. I have a problem with using datatable-serverside, the class "open_modal" cannot called by javascript.

If I use general datatable and display the data with php, the open_modal class works fine.

The result of the data is exactly same with this example, in this example we can call the open_modal class. Not work if I use datatable-serverside. My Example Open Modal with JS

Can you help me? Thank you.

Datatable code:

$('#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 code:

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;

Yay! Solved by myself! ^_^ I changed my function with onclick, thank you.

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

You can try this code regarding list of Table data. There are different columns like "Count","Code","Name","Status","Oppo" in data table.

           "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;
             }