Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

afoysal's avatar

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.

https://i.stack.imgur.com/wol2z.png

0 likes
0 replies

Please or to participate in this conversation.