Datatable Yajra Filter и ajax тот же контроллер Выбор диапазона дат

Question

Я использовал фильтры в некоторых столбцах таблицы данных. Затем по запросу пользователя пришел запрос на фильтрацию записей между двумя датами. Я получаю данные, которые идут с помощью средства выбора диапазона дат, и в ответ поступает правильная информация, но она не активна в том же представлении с данными. Я надеюсь, что мог бы объяснить это просто. Отображение в точности записей в диапазоне дат, который я выбрал с помощью средства выбора диапазона дат.

Мой файл контроллера выглядит следующим образом.

function lists_data(Request $request)
    {   
        try {
            $list = List::with('staff', 'customer', 'user','updated_user','ms');
            if (!empty($request->id)) {
                $list->where('id' , 'LIKE' , '%'.$request->id.'%');
            }
            if (!empty($request->date)) {
                $list->whereDate('created_at', Carbon::createFromFormat('d.m.Y' , $request->date));
            }
            if (!empty($request->user)) {
                $list->whereCreateduserId($request->user);
            }
            if (!empty($request->staff)) {
                $list->where0staffId($request->staff);
            }
            if (!empty($request->customer)) {
                $list->where2customerId($request->customer);
            }

            // Start to comes value form Date Range Picker
            $start_date = $request->start;
            $end_date = $request->end;
            if (!empty($request->start) && !empty($request->end)) {
                $list->whereBetween('created_at', array($start_date, $end_date));
            }

            return DataTables::eloquent($list)->toJson();

            /*
            if (!empty($request->start)) {
                return DataTables::eloquent($list)
                ->filter(function ($query) use ($start_date, $end_date){
                     $query->whereBetween('created_at', array($start_date, $end_date));
                }, true)
                ->toJson();
            } else {
                return DataTables::eloquent($list)->toJson();
            }
            */


        } catch (Exception $exception) {

            return response([
                'error' => true,
                'message' => $exception->getMessage()
            ]);

        }

    }

Выбор диапазона дат и другой код поля фильтра ниже в файле представления

<form name="filter">
    <div class="d-flex align-items-end flex-column bd-highlight mb-3">
        <div class="p-2 bd-highlight">
            <label class="control-label mb-10 text-left">Date Range Picker</label>
            <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
            </div>
        </div>
    </div>

    <div layout="row" class="filter">
        <div flex class="form-group">
            <input name="date" type="text" class="form-control datetime" placeholder="Date">
        </div>
        <div flex class="form-group">
            <select name="user" id="user" class="selectpicker form-control" data-live-search="true" title="Kullanıcı Seçiniz">
                <option value="" style="background-color:#CCC; color:#333">Reset</option>
                @foreach(\App\Models\User::all() as $user)
                    <option value="{{ $user->id }}">{{ $user->name }}</option>
                @endforeach
            </select>
        </div>
        <div flex class="form-group">
                <select name="staff" id="staff" class="selectpicker form-control" data-live-search="true" title="staff Seçiniz">
                    <option value="" style="background-color:#CCC; color:#333">Reset</option>
                @foreach(\App\Models\Staff::all() as $staff)
                    <option value="{{ $staff->id }}">{{ $staff->ad }}</option>
                @endforeach
            </select>
        </div>
        <div flex class="form-group">
            <select name="customer" id="customer" class="selectpicker form-control" data-live-search="true" title="customer Seçiniz">
                <option value="" style="background-color:#CCC; color:#333">Reset</option>
                @foreach(\App\Models\Customer::all() as $customer)
                    <option value="{{ $customer->id }}">{{ $customer->ad }}</option>
                @endforeach
            </select>
        </div>
    </div>
</form>

Поле данных в том же файле просмотра страницы

<table id="example-table" class="table table-striped table-bordered dataTable">

<thead>
<tr>

    <th>Date</th>
    <th>Hours</th>
    <th>User</th>
    <th>Staff</th>
    <th>Customer</th>

    <th class="icon">#</th>
</tr>
</thead>


</table>

Javascript Код ниже. Это место было немного сложным. Мне нужно объединить данные из полей выбора диапазона даты и фильтра. Я должен показать записи между датами, выбранными пользователем с помощью средства выбора диапазона дат в файле представления, и он также должен работать в фильтрах между входящими записями. Я не знаю точно, что здесь делать.

list.min. js

app.controller('ListController', ["$scope", "$mdToast", "$mdDialog", function ListController($scope, $mdToast, $mdDialog) {
    $(document).ready(function () {
        setDataTable([0, 1, 2, 3, 4], 6);
        var start = moment().subtract(29, 'days');
        var end = moment();
        var table = $('#example-table').DataTable({
            ajax: {
                url: '/list/data',
                method: 'POST',
                data: function (d) {
                    let formData = new FormData(document.querySelector("form[name=filter]"));
                    formData.forEach((value, key) => {
                        d[key] = value
                    });
                }
            },
            columns: [
                {
                    data: 'created_at', render: (data) => {
                        return moment(data, "YYYY-MM-DD HH:mm").format("DD.MM.YYYY");
                    }
                },
                {
                    data: 'created_at', render: (data) => {
                        return moment(data, "YYYY-MM-DD HH:mm").format("HH:mm");
                    }
                },
                {data: 'user.name'},
                {
                    data: 'updated_user', render: (updated_user) => {
                        if(updated_user != null){
                            return updated_user.name;
                        }
                        return '';
                    }
                },
                {data: 'staff.name'},
                {
                    data: 'customer', name: 'customer.name', render: (customer) => {
                        return `${customer.name} ${customer.lastname}`;
                    }
                },
            ],
            columnDefs: [{
                "targets": -1,
                "data": null,
                "defaultContent": '\
                    <div class="dropdown">\
                        <a>\
                            <i class="material-icons">more_vert</i>\
                        </a>\
                        <div class="dropdown-menu">\
                            <a class="dropdown-item" id="Detail">Detail</a>\
                            <a class="dropdown-item" id="Update">Update</a>\
                            <a class="dropdown-item" id="Print">Print</a>\
                            <a class="dropdown-item" id="Delete">Delete</a>\
                        </div>\
                    </div>'
            }],
        });

        function cb(start, end) {
            $('#reportrange span').html(start.format('DD.MM.YYYY') + ' - ' + end.format('DD.MM.YYYY'));
            $.ajaxSetup({
                headers: {
                    'X-XSRF-Token': $('meta[name="_token"]').attr('content')
                }
            });
                $.ajax({
                dataType: "json",
                type: 'POST',
                url: '/list/data',
                data: {
                    start : start.format('YYYY-MM-DD HH:mm:ss'),
                    end : end.format('YYYY-MM-DD HH:mm:ss')
                },

                /*
                success: function(response, result, xhr){
                    if(result == 'success' && response) {
                        $('#example-table').DataTable().clear().rows.add(response.data).draw();
                    }else{
                        $('#example-table').DataTable().clear().draw();
                    }

                },
                error: function(){
                    $('#example-table').DataTable().clear().draw();
                }
                */
            });


        }
        $('#reportrange').daterangepicker({
            startDate: start,
            endDate: end,
            ranges: {
               'today': [moment(), moment()],
               'yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
               '7 days': [moment().subtract(6, 'days'), moment()],
               '30 days': [moment().subtract(29, 'days'), moment()],
               'This Mounth': [moment().startOf('month'), moment().endOf('month')],
               'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        },cb);

        $(".dataTables_filter input").unbind().on('keyup', _.debounce(function () {
            table.search(this.value).draw();
        }, 700, {
            'leading': false
        }));

        $(".filter input").on('keyup', _.debounce(function () {
            table.draw();
        }, 700, {
            'leading': false
        }));

        $('.filter select , input.datetime').change(() => {
            table.draw();
        });

        $('a.refresh').on('click', () => {
            table.draw();
        });
    });

}]);