DataTables not displaying data even though the response contains the correct data

[alieTeam]

I'm encountering an issue where DataTables shows 0 rows when filter even though the response from the server contains the expected data. The data is correctly logged in the server-side logs, but the table remains empty.

[2024-12-17 08:39:37] local.INFO: [{"id":8,"grade_name":"KG I","fees":"9550","branch_id":4,"created_at":"2024-12-05T00:06:49.000000Z","updated_at":"2024-12-13T16:45:04.000000Z","deleted_at":null,"dates":[{"id":14,"grade_level_id":8,"grade_start_date":"2025-04-01","created_at":"2024-12-05T00:06:49.000000Z","updated_at":"2024-12-05T00:06:49.000000Z"}]}]

Code snippet of problem

public function data()
    {
        if (!helper_masterOrganisationExist()) {
            abort(404);
        }

        RoleHelper::checkPermission('grade_level_management', 'navigation');
        $requestingUser = Auth::user();

        $query = GradeLevel::with('dates');

        if (RoleHelper::allowedPermissions('grade_level_management', 'view_grades_as_super_admin')) {
            // No additional filters for super-admin
        } else {
            $requesterBranchesIds = $requestingUser->branches->pluck('id');
            $query->whereIn('branch_id', $requesterBranchesIds);
        }

        // **Handle Search Input**
        $this->applyFilters($query, request());

        // **Handle Sorting**
        $this->applySorting($query, request());

        Log::info($query->get());
        return DataTables::of($query)

            ->addColumn('grade_start_date', function ($grade) {
                // return 'hello';
                // Fetch related grade start dates
                $dates = $grade->dates->pluck('grade_start_date');

                // Format each date
                $formattedDates = $dates->map(function ($date) {
                    return Carbon::parse($date)->format('F Y');
                });

                // Check the count and limit to 3
                if ($formattedDates->count() > 3) {
                    $displayDates = $formattedDates->take(3)->join(', ') . ' (+ ' . ($formattedDates->count() - 3) . ' more)';
                } else {
                    $displayDates = $formattedDates->join(', ');
                }

                return $displayDates ?: 'N/A'; // Return 'N/A' if there are no dates
            })
            ->editColumn('fees', function ($grade) {
                return $grade->fees ? number_format($grade->fees) : 'N/A';
            })
            ->addColumn('actions', function ($grade) {
                return view('partials.grade-level-management.common.action-buttons', compact('grade'))->render();
            })
            ->rawColumns(['actions'])
            ->make(true);
    }

    /**
     * Apply filter logic to the query
     */
    private function applyFilters($query, $request)
    {

        if ($request->has('search') && !empty($request->input('search.value'))) {
            $searchTerm = strtolower(trim($request->input('search.value')));

            $query->where('grade_name', 'LIKE', "%{$searchTerm}%")
                ->orWhereRaw("CAST(fees AS CHAR) LIKE ?", ["%{$searchTerm}%"])
                ->orWhereHas('dates', function ($subQuery) use ($searchTerm) {
                    $subQuery->whereRaw("DATE_FORMAT(grade_start_date, '%M %Y') LIKE ?", ["%{$searchTerm}%"]);
                });
        }

        return $query;
    }

$('#gradeLevelTable').DataTable({
                ...dataTableConfig,
                ajax: {
                    url: "{{ route('web.grade-levels.data') }}",
                    cache: false,
                    beforeSend: function() {
                        showLoadingSpinner();
                    },
                    complete: function() {
                        hideLoadingSpinner();
                    }
                },
                columns: [{
                        data: 'grade_name',
                        name: 'grade_name'
                    },
                    {
                        data: 'grade_start_date',
                        name: 'dates.grade_start_date',
                        // orderable: false,
                        // searchable: false
                    },
                    {
                        data: 'fees',
                        name: 'fees'
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                    }
                ],
                initComplete: function(settings, json) {
                    updateExportButtonVisibility(this.api().data().any());
                },
                drawCallback: function(settings) {
                    updateExportButtonVisibility(this.api().data().any());
                }
            });```

[github-actions]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[yajra]

The code looks correct. Were you able to inspect the network request and check if the correct JSON response was returned? Any console error?