Dec 14, 2023
0
Level 8
Action column of jQuery Datatable with Laravel
I am using jQuery Datatable with Laravel. My Laravel Service code is like below.
return datatables($gasSafeties)
->addIndexColumn()
->addColumn('issue_date', function ($gasSafety) {
return $gasSafety->issue_date;
})
->addColumn('expiry_date', function ($gasSafety) {
return $gasSafety->expiry_date;
})
->addColumn('certified_by', function ($gasSafety) {
return $gasSafety->certified_by;
})
->addColumn('governing_body', function ($gasSafety) {
return $gasSafety->governing_body;
})
->addColumn('image', function ($gasSafety) {
return '<img src="' . $gasSafety->image . '" class="rounded-circle avatar-md tbl-user-image" alt="Image">';
})
->addColumn('action', function ($gasSafety) {
return '<div class="tbl-action-btns d-inline-flex">
<a type="button" class="p-1 tbl-action-btn" href="' . route('owner.property.edit', $gasSafety->id) . '" title="' . __('Edit') . '"><span class="iconify" data-icon="clarity:note-edit-solid"></span></a>
<a type="button" class="p-1 tbl-action-btn" href="' . route('owner.property.show', $gasSafety->id) . '" title="' . __('View') . '"><span class="iconify" data-icon="carbon:view-filled"></span></a>
<button onclick="deleteItem(\'' . route('owner.property.delete', $gasSafety->id) . '\', \'allDataTable\')" class="p-1 tbl-action-btn" title="' . __('Delete') . '"><span class="iconify" data-icon="ep:delete-filled"></span></button>
</div>';
})
->rawColumns(['image', 'action'])
->make(true);
My Datatable jQuery code is like below.
$('#gassaftiesDatatable').DataTable({
processing: true,
serverSide: true,
pageLength: 25,
responsive: true,
ajax: $('#getGasSafetiesRoute').val(),
order: [1, 'desc'],
ordering: false,
autoWidth: false,
drawCallback: function () {
$(".dataTables_length select").addClass("form-select form-select-sm");
},
language: {
'paginate': {
'previous': '<span class="iconify" data-icon="icons8:angle-left"></span>',
'next': '<span class="iconify" data-icon="icons8:angle-right"></span>'
}
},
columns: [{
"data": "issue_date",
},
{
"data": "expiry_date",
},
{
"data": "certified_by",
},
{
"data": "governing_body",
},
{
"data": "image",
},
{
"data": "action",
},
]
});
But I am getting blank Image and Action column like below.
Please or to participate in this conversation.