如何在一个按钮上使用Laravel中的Ajax？

Question

I have an ajax table that I want to filter the results of all active courses using ajax.

Here is what I've tried - view

Button - Filter active records

<a href="{{ route('admin.courses.index',['$active_records'=>'active']) }}" style="margin-left:10px;" class="btn btn-success">
            Active <span class="badge badge-light">{{$course_count_active}}</span>
          <span class="sr-only">total courses</span></a>

Table that I need to filter the results when the button is clicked

<p>
        <ul class="list-inline">
            <li><a href="{{ route('admin.courses.index') }}" style="{{ request('show_deleted') == 1 ? '' : 'font-weight: 700' }}">@lang('global.app_all')</a></li> |
            <li><a href="{{ route('admin.courses.index') }}?show_deleted=1" style="{{ request('show_deleted') == 1 ? 'font-weight: 700' : '' }}">@lang('global.app_trash')</a></li>
        </ul>
    </p>


    <div class="panel panel-default">
        <div class="panel-heading">
            @lang('global.app_list')
        </div>

        <div class="panel-body table-responsive">
            <table class="table table-bordered table-striped ajaxTable @can('course_delete') @if ( request('show_deleted') != 1 ) dt-select @endif @endcan">
                <thead>
                    <tr>
                        @can('course_delete')
                            @if ( request('show_deleted') != 1 )<th style="text-align:center;"><input type="checkbox" id="select-all" /></th>@endif
                        @endcan


                        <th>@lang('global.courses.fields.title')</th>
                        <th>@lang('global.courses.fields.safety-topic')</th>
                        <th>@lang('global.courses.fields.course-image')</th>
                        <th>@lang('global.courses.fields.start-date')</th>
                        <th>@lang('global.courses.fields.due-date')</th>
                        <th>@lang('global.courses.fields.status')</th>

                        @if( request('show_deleted') == 1 )
                        <th>&nbsp;</th>
                        @else
                        <th>&nbsp;</th>
                        @endif
                    </tr>
                </thead>
            </table>
        </div>
    </div>
@stop

Here is the ajax script

@section('javascript')
    <script>
        @can('course_delete')
            @if ( request('show_deleted') != 1 ) window.route_mass_crud_entries_destroy = '{{ route('admin.courses.mass_destroy') }}'; @endif
        @endcan
        $(document).ready(function () {
            window.dtDefaultOptions.ajax = '{!! route('admin.courses.index') !!}?show_deleted={{ request('show_deleted') }}';
            window.dtDefaultOptions.columns = [@can('course_delete')
                @if ( request('show_deleted') != 1 )
                    {data: 'massDelete', name: 'id', searchable: false, sortable: false},
                @endif
                @endcan

                {data: 'title', name: 'title'},
                {data: 'safety_topic.topic', name: 'safety_topic.topic'},
                {data: 'course_image', name: 'course_image'},
                {data: 'start_date', name: 'start_date'},
                {data: 'due_date', name: 'due_date'},
                {data: 'status', name: 'status', searchable:true},
                {data: 'actions', name: 'actions', searchable: false, sortable: false}
            ];
            processAjaxTables();
        });
    </script>
@endsection

I'm currently the button is refreshes the page, however the results are not being filtered.