search not working after using query() in yajra ajax datatables laravel

I have faced a problem in yajra ajax datatables to show client lists. If I use query() then performance is better in case of a lot of data but the search doesn't work.

On the other hand, If I didn't use query() search works but the loading time increases too much.

If you know about this problem please send a pull request or answer here. The GitHub repository link is below:

https://github.com/Arafat7616/yajra_ajax_datatable_problem

Here is my Controller code:

if ($request->ajax()) {
        $data =  Client::query()->withTrashed();

        // $data =  Client::withTrashed()->get();
        return datatables::of($data)
            ->addColumn('name', function ($data) {
                return $data->name ?? '';
            })->addColumn('short_code', function ($data) {
                return $data->short_code ?? '';
            })->addColumn('created_at', function ($data) {
                return $data->created_at->format('d/m/Y');
            })->addColumn('status', function ($data) {
                $statusHtml = ' <label class="toggle">';
                if ($data->status == 0) {
                    $statusHtml .= '<input onclick="changeStatus(\'' . $data->id . '\',\'' . $data->status . '\')" class="toggle-checkbox" type="checkbox" >';
                } elseif ($data->status == 1) {
                    $statusHtml .= '<input onclick="changeStatus(\'' . $data->id . '\',\'' . $data->status . '\')" class="toggle-checkbox" type="checkbox" checked >';
                }

                $statusHtml .=  '<div class="toggle-switch"></div>';

                if ($data->status == 1) {
                    $statusHtml .= '<span class="badge badge-sm text-white ml-2 badge-success"> Active</span>';
                } else {
                    $statusHtml .= '<span class="badge badge-sm text-white ml-2 badge-warning"> Inactive</span>';
                }
                $statusHtml .= '</label>';
                return $statusHtml;
            })->addColumn('action', function ($data) {
                $actionHtml = "";
                if ($data->deleted_at != null) {
                    $actionHtml .= '<a href="' . route('client.restore', $data->id) . '">
                             <i class="fa fa-undo"></i>
                         </a>
                         <a class="action-button bg-danger text-white m-2"
                             href="' . route('client.forceDelete', $data->id) . '">
                             <i class="fa fa-trash bg-danger text-white"></i> Force Delete
                         </a>';
                } else {
                    $actionHtml .= ' <a href="' . route('client.edit', $data->id) . '">
                             <i class="far fa-edit"></i>
                         </a>
                         <button class="action-button-warning bg-warning text-white m-2"
                             onclick="delete_function(this)"
                             value="' . route('client.destroy', $data->id) . '">
                             <i class="fa fa-trash bg-warning text-white"></i> Delete
                         </button>';
                }
                return $actionHtml;
            })
            ->rawColumns(['name', 'short_code', 'created_at', 'status', 'action'])
            ->addIndexColumn()
            ->make(true);
    }
    return view('backend.client.index');

and my blade files code is:

  $('#datatable').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            "lengthMenu": [5, 10, 25, 50, 75, 100, 200, 400, 500],
            "pageLength": 10,
            ajax: '{!! route('client.index') !!}',
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'short_code',
                    name: 'short_code'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'action',
                    name: 'action'
                },
            ],
            initComplete: function() {
                this.api().columns().every(function() {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty())
                        .on('change', function() {
                            column.search($(this).val(), false, false, true).draw();
                        });
                });
            }
        });