I have a datatable, with multiple columns. In the last column I have 2 buttons. I would like to show the second button only when a value in another column (Type column) is "2". If its 1 or 3, then hide that button. Any ideas? It's only show and hide the complete column when I tried to do this.
My datatable:
async function loadDesc(mainID) {
let errDatatableId = '#desc-table';
if ($.fn.dataTable.isDataTable(errDatatableId)) {
$(errDatatableId).DataTable().destroy();
}
$(errDatatableId).DataTable({
data: await getDescription(mainID),
columns: [
{
"data": "Description",
"render": function (data) {
return data;
}
},
{
"data": "User",
"render": function (data) {
return data;
}
},
{
"data": "Date",
"render": function (data) {
return moment(data).format('YYYY-MM-DD HH:mm');
}
},
{
"data": "Type",
"render": function (data) {
switch (data) {
case 1:
return "Done";
case 2:
return "Modify";
case 3:
return "Over";
default:
return "Error";
}
}
},
{
"data": "ID",
"render": function (data) {
return data;
}
},
{
"data": "entityId",
"render": function (data, type, row, meta) {
var sendTime = moment(Date()).format('YYYY-MM-DD HH:mm');
return `
<div class="ui icon buttons fluid" style="width:70%;">
<button class="firstButton"><i class="icon check"></i></button>
<button class="secondButton" hidden><i class="icon pencil"></i></button>
</div>
`;
}
}
],
columnDefs: [{
className: 'dt-nowrap',
targets: [0, 2]
}],
lengthMenu: [
[30, 100, 300],
[30, 100, 300]
],
order: [0, 'asc']
});
}
