Hey everyone, am new here and I have this problem plzz anyone help me am so stuck in this..

am building this project in Laravel 7, I used datatables and used ajax to load data into the table, bellow are all the related pages,

HTML

 <table class="table table-bordered table-striped table-vcenter js-dataTable-full" id="table_id">
                    <thead>
                    <tr>
                        <th>Campus Code</th>
                        <th>Name</th>
                        <th>Phone</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>

SCRIPT

function loadtbl() {
                $('#table_id').DataTable(
                    {
                        dom: 'Bfrtip',
                        searchPanes:{
                            cascadePanes: true
                        },

                        buttons: [
                            'colvis', 'copy', 'csv', 'excel', 'pdf', 'print', 'searchPanes'
                        ],
                        fixedHeader: true,
                        responsive: true,
                        searchPanes: true,
                        serverSide: true,
                        processing: true,
                        ajax: '{!! route('campuses.index') !!}',
                        columns: [
                            {data: 'ccode', name: 'ccode'},
                            {data: 'name', name: 'name'},
                            {data: 'phone', name: 'phone'},
                            {data: 'address', name: 'address'},
                            {data: 'action', name: 'action', orderable: false, searchable: false},
                        ],
                        columnDefs:[
                            {
                                searchPanes:{
                                    show: true,
                                },
                                targets: [0,1,2,3],
                            }

                        ]
                    }
                );
                $('#table_id').DataTable().searchPanes.rebuildPane();
            }
            loadtbl();

Laravel Controller

public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = Campus::orderBy('id','desc');
            return datatables()::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $action = '<a id="show" data-toggle="modal" data-id='.$row->id.'><button type="button" class="btn btn-rounded btn-outline-success">Show</button></a>
<a id="edit" data-id='.$row->id.'><button type="button" class="btn btn-rounded btn-outline-warning">Edit</button> </a>
<meta name="csrf-token" content="{{ csrf_token() }}">
<a id="delete" data-id='.$row->id.'><button type="button" class="btn btn-rounded btn-outline-danger">Delete</button></a>';

                    return $action;
                })
                ->rawColumns(['action'])
                ->make(true);

        }

        return view('campuses.index');

    }

Now everything is working fine, all the pagination and search and everything is fine, The only problem is tht searchpanes dont Work, Plzzzz anyone tell me wht should I do about it, I think I have made some dumb mistake over here.

Here is a video link
https://drive.google.com/file/d/1aMOQJx2GX69i7K-8a05X4muVleuIA5HW/view