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>

Shiva Manhar · Accepted Answer · 2017-12-12 12:20:16Z

7

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
        }
    ]

edited Dec 12, 2017 at 12:20

answered Dec 12, 2017 at 12:15

Shiva Manhar

7039 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KushGene Over a year ago

Doesn't work for me :(. Gettin Uncaught SyntaxError: Unexpected string Error. Nevermind, forgot the , after the render function. Thank you for your help :)

Aju Over a year ago

I think data["id"] is enough !!

Sagnalrac · Accepted Answer · 2020-07-22 09:02:36Z

In @Shiva Manhar answer using row.id instead of data[0] works too!

Another way in case you don't need to show the Id as a column:

"columns": [
        { "data" : "status" },
        { "data" : "opened_at" },
        { "data" : "last_answer" },
        {
            "data": "id",
            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 +'" href="#">Ticket öffnen</a><a class="dropdown-item" href="#" onclick="reopenTicket('+ data +')">Ticket neu öffnen.</a><a class="dropdown-item" href="#" onclick="closeTicket('+ data +')">Ticket schließen</a><a class="dropdown-item" href="#">Ticket löschen</a></div>';
            }
        }
    ]

Collectives™ on Stack Overflow

How to pass data into defaultContent of DataTable.JS columns

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related