How to pass data into defaultContent of DataTable.JS columns

Question

I am new with working Javascript and I am usign DataTables.js for my tables. I need to add some management Butons (edit, delete, open) so I added them to the columns.

To make these Buttons working I need to pass the id of my table which is the first row to the Button data-target.

I tried this code without success:

"columns": [
        { "data" : "id" },
        { "data" : "status" },
        { "data" : "opened_at" },
        { "data" : "last_answer" },
        {
            "data": null,
            "defaultContent": '<button id="actionButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Aktion</button><div class="dropdown-menu" aria-labelledby="actionButton"><a class="dropdown-item" data-toggle="modal" data-target="#ticketModal'+data[0]+'" href="#">Ticket öffnen</a><a class="dropdown-item" href="#" onclick="reopenTicket('+data[0]+')">Ticket neu öffnen.</a><a class="dropdown-item" href="#" onclick="closeTicket('+data[0]+')">Ticket schließen</a><a class="dropdown-item" href="#">Ticket löschen</a></div>',
            "targets": -1
        }
    ]

Notice:

data-target="#ticketModal'+data[0]+'"

in "defaultContent":.

I need to pass the ID of the rows in this data-target's.

How is this possible ? data[0] is not working, but how it works then ? I need the ID to make the functions working which are called when i click one of the Button:

function closeTicket(id) {
    var url = "api.php?closeTicket="+id;

    http = new XMLHttpRequest();
    http.open("GET", url, true);
    http.send(null);
    location.reload();
}


<a class="dropdown-item" href="#" onclick="closeTicket('+data[0]+')">Ticket schließen</a>

Answer 1

Try this code:

"columns": [
        { "data" : "id" },
        { "data" : "status" },
        { "data" : "opened_at" },
        { "data" : "last_answer" },
        {
            "data": null,
            render:function(data, type, row)
            {
              return '<button id="actionButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Aktion</button><div class="dropdown-menu" aria-labelledby="actionButton"><a class="dropdown-item" data-toggle="modal" data-target="#ticketModal'+data[0]+'" href="#">Ticket öffnen</a><a class="dropdown-item" href="#" onclick="reopenTicket('+data[0]+')">Ticket neu öffnen.</a><a class="dropdown-item" href="#" onclick="closeTicket('+data[0]+')">Ticket schließen</a><a class="dropdown-item" href="#">Ticket löschen</a></div>';
            },
            "targets": -1
        }
    ]