DataTable with Laravel 7, Id from URL in show method not working

Question

I got a school project where we use Laraval 7. In this project I'm using DataTables and try to show the worked days from a specific timesheet based on a timesheet_id, from the currently logged-in consultant. Now when I hardcore this id as integer it works as intended but when I retrieve the id given in the URL and drop it in as variable it does not accept it and shows me no records at all.

This works but is hardcoded, it also works when I make a variable with an integer value in the show method itself and use that:

public function show($id)
    {
        if (request()->ajax()) {
            $data = (Workday::where('timesheet_id', 1)->where('user_id', Auth::id())->with('timesheet.consultantOpportunity.consultant', 'dayType', 'timesheet.consultantOpportunity.opportunity.customer'));
            return datatables()->of($data)
                ->addColumn('timesheet', function ($data) {
                    return $data->timesheet->id;
                })
                ...
                ->addColumn('updated_at', function ($data) {
                    $updated_at = $data->updated_at ? (new DateTime($data->updated_at))->format('d-m-Y') : null;
                    return $updated_at;
                })
                ->rawColumns([ 'timesheet', 'client', 'opportunity', 'contact_person', 'day_type', 'date_sort', 'date', 'start', 'end', 'duration', 'pause', 'total', 'comment', 'actionButtons', 'updated_at'])
                ->addIndexColumn()
                ->make(true);
        }
        return view('consultants.timesheets.workdays.index');
    }

[It results in this:][1]

And here when I use the integer given from the URL it doesn't show me no records at all: [This is what return $id gives me:][2]

public function show($id)
    {
        if (request()->ajax()) {
            $data = (Workday::where('timesheet_id', $id)->where('user_id', Auth::id())->with('timesheet.consultantOpportunity.consultant', 'dayType', 'timesheet.consultantOpportunity.opportunity.customer'));
            return datatables()->of($data)
                ->addColumn('timesheet', function ($data) {
                    return $data->timesheet->id;
                })
                ...
                ->addColumn('updated_at', function ($data) {
                    $updated_at = $data->updated_at ? (new DateTime($data->updated_at))->format('d-m-Y') : null;
                    return $updated_at;
                })
                ->rawColumns([ 'timesheet', 'client', 'opportunity', 'contact_person', 'day_type', 'date_sort', 'date', 'start', 'end', 'duration', 'pause', 'total', 'comment', 'actionButtons', 'updated_at'])
                ->addIndexColumn()
                ->make(true);
        }
        return view('consultants.timesheets.workdays.index');
    }

[Resulting in this:][3]

My DataTable is just like this:

<script>
        $(document).ready( function () {
            $('#myTable').DataTable({
                processing: true,
                serverSide: false,
                ajax: "{{ route( 'workdays.show', 'id') }}",
                order: ([2, 'des']),
                columns: [
                    { data: 'timesheet', name: 'timesheet', visible: true },
                    { data: 'id', name: 'id', visible: false },
                    { data: 'day', name: 'day', orderable: false, visible: true },
                    { data: 'date_sort', name: 'date_sort', visible: false,},
                    { data: 'date', name: 'date', orderData: [ 2 ] },
                    { data: 'day_type', name: 'day_type' },
                    { data: 'client', name: 'client' , visible: true},
                    { data: 'opportunity', name: 'opportunity' , visible: true},
                    { data: 'start', name: 'start' },
                    { data: 'end', name: 'end' },
                    { data: 'duration', name: 'duration' },
                    { data: 'pause', name: 'pause' },
                    { data: 'comment', name: 'comment', orderable: false},
                    { data: 'total', name: 'total'},
                    // { data: 'confirm', name: 'confirm'},
                    { data: 'actionButtons', name: 'actionButtons'},
                    { data: 'updated_at', name: 'updated_at'},
                ],
            });
        });
</script>

My route is just a resource route. I hope someone can help me out with a simple working solution. Thanks in advance :) [1]: https://i.stack.imgur.com/266Rj.jpg [2]: https://i.stack.imgur.com/UOKWG.jpg [3]: https://i.stack.imgur.com/KCkbo.jpg

Answer 1

Found a solution by doing:

$(document).ready( function () {
        $('#myTable').DataTable({
                processing: true,
                serverSide: false,
                ajax: '/consultant/timesheets/workdays/'+parseInt(window.location.href.split('/')[6].replace('#!', '')),
                order: ([3, 'des']),
                columns: [
                    { data: 'timesheet_id', name: 'timesheet_id', visible: false},
                    { data: 'id', name: 'id', visible: false },
                    { data: 'day', name: 'day', orderable: false, visible: true},
                    { data: 'date_sort', name: 'date_sort', visible: false},
                    { data: 'date', name: 'date', orderData: [ 3 ] },
                    { data: 'day_type', name: 'day_type' },
                    { data: 'client', name: 'client' , visible: true},
                    { data: 'opportunity', name: 'opportunity' , visible: true},
                    { data: 'start', name: 'start' },
                    { data: 'end', name: 'end' },
                    { data: 'duration', name: 'duration', visible: false },
                    { data: 'pause', name: 'pause' },
                    //{ data: 'comment', name: 'comment', orderable: false},
                    { data: 'total', name: 'total'},
                    // { data: 'confirm', name: 'confirm'},
                    { data: 'actionButtons', name: 'actionButtons'},
                    //{ data: 'updated_at', name: 'updated_at'},
                ],
            });
        });

It grabs the URL and gets the ID from it to pass it to the ajax route. And then I can pass the ID to the controller and use it in the query.