'Laravel Datatable addColumn returns ID of one record only

I'm trying to use Yajra Datatable to integrate a DataTable in my website. I was able to render the table but run into a problem. In the addColumn field where i put the delete option, the id is returning only the single record not the specific ID of each column.

Here's my controller code

public function fetchData($manifest_no){
            $hwb_data = DB::table('hwb')
                ->join('manifest_records', 'hwb.id', '=', 'manifest_records.hwb_id')
                ->join('consignees', 'consignees.id', '=', 'hwb.client_id')
                ->where('manifest_records.manifest_no', $manifest_no)
                ->get();

        return Datatables::of($hwb_data)
            ->addIndexColumn()
            ->addColumn('action', function($row){
               $idx = $row->id;
                $btn = "<a href='javascript:void(0)' id='delete' data-id='$idx' class='edit btn btn-danger btn-sm'>$idx</a>";
                return $btn;
            })
            ->rawColumns(['action'])
            ->make(true);
    }

Here's the Datatable rendering

$(function () {
        let table = $('#tableSample').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ url("/fetchData/$manifest_no") }}",
            columns: [
                {data: 'id', name: 'id', 'visible': false},
                {data: 'created_at', name: 'created_at'},
                {data: 'hwb_no', name: 'hwb_no'},
                {data: 's_name', name: 's_name'},
                {data: 'c_name', name: 'c_name'},
                {data: 'destination', name: 'destination'},
                {data: 'dr_no', name: 'dr_no'},
                {data: 'commodity', name: 'commodity'},
                {data: 'actual_weight', name: 'actual_weight'},
                {data: 'tp_cbm', name: 'tp_cbm'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

        $("#tableReload").delegate('#delete', 'click', function (e) {
            e.preventDefault();
            let id = $(this).data('id');
            console.log(id);
        })
    });

I Whenever i render the data, i always run into this problem. Action button always have value of 2

enter image description here

laravelyajra-datatable


Solution 1:[1]

I guess you have to use the Render function Like this, instead of the backend function

Also try to dump $row and the dd before rendering the view, just to check that $row has the correct values you are expecting!

$(function () {
            let table = $('#tableSample').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url("/fetchData/$manifest_no") }}",
                columns: [
                    {data: 'id', name: 'id', 'visible': false},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'hwb_no', name: 'hwb_no'},
                    {data: 's_name', name: 's_name'},
                    {data: 'c_name', name: 'c_name'},
                    {data: 'destination', name: 'destination'},
                    {data: 'dr_no', name: 'dr_no'},
                    {data: 'commodity', name: 'commodity'},
                    {data: 'actual_weight', name: 'actual_weight'},
                    {data: 'tp_cbm', name: 'tp_cbm'},

                    {   data: 'id', 
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        "render": function ( data, type, row, meta ) { 
                            return '<button class="delete btn btn-danger" data-id="'+ data +'"> Delete  </button>'
                        }},
                ]
            });

        });

Solution 2:[2]

        ->addColumn('action', function($hwb_data){
            $btn = "<a href='javascript:void(0)' id='delete' data-id='".$hwb_data->id."' class='edit btn btn-danger btn-sm'>".$hwb_data->id."</a>";
            return $btn;
        })

Try this, It worked for me

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Wahsei

Related Questions