How to add buttons to each row of a datatable? The buttons are not being displayed on the rows.

andrereid633

$(document).ready(function() {
var table = $('#example').DataTable({
"columns": [
{ "data": "id" },
{ "data": "itemID" },
{ "data": "imagePath" },
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "icon" },
{ "data": "reporter" },
{ "data": "title" },
{ "data": "dateUploaded" },
{ "data": "dateReported" },
{ "data": "reportedReason" },
{ "data": "description" },
{ "data": "problem" },
{ "data": "numReports" },
{ "data": "deleteImage" }
],
"columnDefs":
[
{
"targets": 0,
"visible": false
},
{
"targets": 1,
"visible": false
},
{
"targets": 2,
"visible": false
},
{
"data": null,
"defaultContent": "<button>Delete</button>",
"targets": -1
}
]
});
]);

andrereid633

The table in the html is populated by using a foreach loop to load the data from the server to the table. I tried the suggestion in the following links to
solve the issue.

https://datatables.net/reference/option/columns.defaultContent
https://stackoverflow.com/questions/22471862/how-do-i-add-button-on-each-row-in-datatable
https://datatables.net/examples/ajax/null_data_source.html
https://stackoverflow.com/questions/31327933/how-add-more-then-one-button-in-each-row-in-jquery-datatables-and-how-to-apply-e

kthorngren

My understanding is that columnDefs is applied before columns.data. Your columns.data config { "data": "deleteImage" } is overwriting the columnDefs option that is building the button. Try changing { "data": "deleteImage" } to { "data": null } to keep from overwriting the button.

Kevin