Question

我是使用Javascript的新手，我为我的桌子使用了DataTables.js。我需要添加一些管理Butons（编辑，删除，打开），所以我将它们添加到列中。

要使这些按钮正常工作，我需要将我的表的id传递给按钮data-target的第一行。

我尝试使用此代码但未成功：

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

注意：

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

"defaultContent":中的

。

我需要传递此data-target中的行ID。

这怎么可能？ data[0]无效，但它是如何运作的呢？我需要ID来使函数工作，当我单击其中一个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

试试这段代码：

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

Answer 2

在 @Shiva Manhar 中，使用 row.id 代替数据[0] 也可以！

如果您不需要将ID列显示的另一种方式：

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

如何将数据传递到DataTable.JS列的defaultContent

2 个答案: