I want to make a list datatable without package

I have this Routs :

            Route::get('subscribed', [SubscribeController::class, 'index'])->name('subscribed.index');
            Route::get('subscribed/get-data', [SubscribeController::class, 'getDataTable'])->name('subscribed.get_data');

and this index in controller :

public function index()
    {
        return view('backend.subscribe.index');
    }

public function getDataTable(Request $request)
    {
        $perPage = $request->input('length', 20); // Records per page
        $search = $request->input('search.value', ''); // Search keyword



        // Get the data based on search and pagination
        $query = Subscribe::query()
            ->where('email', 'like', '%' . $search . '%')
            ->orderBy('id', 'desc');

        // Apply pagination
        $data = $query->paginate($perPage, ['*'], 'draw');

        // Prepare the response data for DataTables
        $responseData = [
            'draw' => intval($request->input('draw', 1)),
            'recordsTotal' => $data->total(),
            'recordsFiltered' => $data->total(),
            'data' => $data->items(),
        ];


        return response()->json($responseData);
    }

in Js

    c3 = $('#style-3').DataTable({
        "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
            "<'table-responsive'tr>" +
            "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
        "oLanguage": {
            "oPaginate": {
                "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
            },
            "sInfo": "Showing page _PAGE_ of _PAGES_",
            "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
            "sSearchPlaceholder": "Search...",
            "sLengthMenu": "Results :  _MENU_"
        },
        "stripeClasses": [],
        "lengthMenu": [5, 10, 20, 50, 100],
        "pageLength": 10,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/admin/subscribed/get-data",
            "type": "GET",
            "data": function (data) {
                data.search.value = data.search.value;
            }
        },
        "columns": [
            { "data": "id" },
            { "data": "email" },

        ]
    });

    multiCheck(c3);

the blade "

<table id="style-3" class="table style-3 dt-table-hover non-hover">
                        <thead>
                        <tr>
                            <th class="checkbox-column dt-no-sorting"> Record no. </th>
                            <th>Email</th>
                            <th>Status</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>

everything works okay but the pagination after complete all pages the data will be empty how can fix it