Laravel 8 下拉列表从数据中提取并过滤到数据表

Question

Laravel 8 与用户和团队合作

我正在研究数据表 javascript 和控制器，但错误仍然存​​在，它困扰着我，因为我对 laravel 不了解，因为我只在 laravel 上工作了一个月（它是完美的代码，而且比 WordPress 好得多PHP）。我在google上看details，但是大部分都是基于hardcode选择列表的details write dropdowns。

我正在使用

<label for="selectTeam">{{ __('Team')}}</label>
    <select class="form-control" id="selectTeam">
    @foreach($teamlistfliter as $row)
   <option>{{ $row->team }}</option>
   @endforeach
</select>

它工作正常，但与列表中的数据表显示用户无关

但是当我想要这个下拉列表可以查询到用户列表时，它变成了错误

这是我写的控制器页面

class TeamUserListController extends Controller
{
    public function index(Request $request)
    {
        if ($request->ajax())
         {
            $teamlistfliter = User::join('teams', 'teams.id', '=', 'users.current_team_id')
                    ->get(['users.name as username', 'teams.name as team', 'users.firstname as first_name', 'users.surname as surname']);
            return Datatables::of($teamlistfliter)
                    ->filter(function ($instance) use ($request) {
                        if ($request->get('team') == '0' || $request->get('team') == '1') {
                            $instance->where('team', $request->get('team'));
                        }
                        if (!empty($request->get('search'))) {
                             $instance->where(function($w) use($request){
                                $search = $request->get('search');
                                $w->orWhere('name', 'LIKE', "%$search%")
                                ->orWhere('email', 'LIKE', "%$search%");
                            });
                        }
                    })
                    ->rawColumns(['team'])
                    ->make(true);
        }
        return view('teamlistfliter');
    }
}

和刀片页面

<div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header d-block">
                        <div class="col-md-6">
                             <div class="form-group">
                                <label for="selectTeam">{{ __('Team')}}</label>
                                <select class="form-control" id="selectTeam">
                                    @foreach($teamlistfliter as $row)
                                    <option>{{ $row->team }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="dt-responsive">
                            <table id="simpletable"
                                   class="table table-striped table-bordered nowrap">
                                <thead>
                                    <tr>
                                        <th>{{ __('First Name')}}</th>
                                        <th>{{ __('Surname')}}</th>
                                        <th>{{ __('Username')}}</th>
                                        <th>{{ __('Team')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($teamlistfliter as $row)
                                    <tr>
                                        <td>{{ $row->first_name }}</td>
                                        <td>{{ $row->surname }}</td>
                                        <td>{{ $row->username }}</td>
                                        <td>{{ $row->team }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>{{ __('First Name')}}</th>
                                        <th>{{ __('Surname')}}</th>
                                        <th>{{ __('Username')}}</th>
                                        <th>{{ __('Team')}}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- push external js -->
     @push('script')
    <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('js/datatables.js') }}"></script>
    <script type="text/javascript">
    $(function () {

        var table = $('#selectTeam').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
            url: "{{ route('teamlistfliter.index') }}",
            data: function (d) {
                    d.approved = $('#selectTeam').val(),
                    d.search = $('input[type="search"]').val()
                }
            },
            columns: [
                {data: 'firstname', name: 'firstname'},
                {data: 'surname', name: 'surname'},
                {data: 'username', name: 'username'},
                {data: 'email', name: 'email'},
                {data: 'team', name: 'team'},
            ]
        });

        $('#selectTeam').change(function(){
            table.draw();
        });

    });
</script>
    @endpush
@endsection

我担心我错过了一些东西，因为我认为问题是声明之外的 $teamlistfilter。

[2021-09-03 19:28:18] local.ERROR: Undefined variable: teamlistfliter (View: C:\Ergnation-rowing\resources\views\teamlistfliter.blade.php) {"view":{"view":"C:\\Ergnation-rowing\
esources\\views/teamlistfliter.blade.php","data":{"errors":"<pre class=sf-dump id=sf-dump-1080913330 data-indent-pad=\"  \"><span class=sf-dump-note>Illuminate\\Support\\ViewErrorBag</span> {<a class=sf-dump-ref>#1449</a><samp data-depth=1 class=sf-dump-expanded>
  #<span class=sf-dump-protected title=\"Protected property\">bags</span>: []
</samp>}
</pre><script>Sfdump(\"sf-dump-1080913330\", {\"maxDepth\":3,\"maxStringLength\":160})</script>
"}},"userId":1,"exception":"[object] (Facade\\Ignition\\Exceptions\\ViewException(code: 0): Undefined variable: teamlistfliter (View: C:\\Ergnation-rowing\
esources\\views\\teamlistfliter.blade.php) at C:\\Ergnation-rowing\
esources\\views/teamlistfliter.blade.php:45)

Answer 1

尝试从控制器获取基本值并使用 JavaScript 在刀片页面上编写

public function index()
{
    $teamlistfliter = User::join('teams', 'teams.id', '=', 'users.current_team_id')
                ->get(['users.name as username', 'teams.name as team', 'users.firstname as first_name', 'users.surname as surname']);
    return view('teamlistfliter', compact('teamlistfliter'));
}

在刀片页面上使用 JavaScript

<div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header d-block">
                        <h3>{{ __('Team')}}</h3>
                        <div class="Team-filter">
                        <select id="TeamFilter" class="form-control">
                                <option value="">Show All</option>
                                @foreach($teamlistfliter as $row)
                                    <option>{{ $row->team }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="dt-responsive">
                            <table id="filterTable"
                                   class="table table-striped table-bordered nowrap">
                                <thead>
                                    <tr>
                                        <th>{{ __('First Name')}}</th>
                                        <th>{{ __('Surname')}}</th>
                                        <th>{{ __('Username')}}</th>
                                        <th>{{ __('Team')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($teamlistfliter as $row)
                                    <tr>
                                        <td>{{ $row->first_name }}</td>
                                        <td>{{ $row->surname }}</td>
                                        <td>{{ $row->username }}</td>
                                        <td>{{ $row->team }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th>{{ __('First Name')}}</th>
                                        <th>{{ __('Surname')}}</th>
                                        <th>{{ __('Username')}}</th>
                                        <th>{{ __('Team')}}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- push external js -->
     @push('script')
    <script src="{{ asset('plugins/DataTables/datatables.min.js') }}"></script>
    <script src="{{ asset('js/datatables.js') }}"></script>
    <script>
    $("document").ready(function () {
      $("#filterTable").dataTable({
        "searching": true
      });
      //Get a reference to the new datatable
      var table = $('#filterTable').DataTable();
      //Take the Team filter drop down and append it to the datatables_filter div.
      //You can use this same idea to move the filter anywhere withing the datatable that you want.
      $("#filterTable_filter.dataTables_filter").append($("#TeamFilter"));

      //Get the column index for the Team column to be used in the method below ($.fn.dataTable.ext.search.push)
      //This tells datatables what column to filter on when a user selects a value from the dropdown.
      //It's important that the text used here (Team) is the same for used in the header of the column to filter
      var TeamIndex = 0;
      $("#filterTable th").each(function (i) {
        if ($($(this)).html() == "Team") {
          TeamIndex = i; return false;
        }
      });
      //Use the built in datatables API to filter the existing rows by the Team column
      $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
          var selectedItem = $('#TeamFilter').val()
          var Team = data[TeamIndex];
          if (selectedItem === "" || Team.includes(selectedItem)) {
            return true;
          }
          return false;
        }
      );
      //Set the change event for the Team Filter dropdown to redraw the datatable each time
      //a user selects a new filter.
      $("#TeamFilter").change(function (e) {
        table.draw();
      });
      table.draw();
    });
  </script>
    @endpush
@endsection

应该可以的

Answer 2

这就是我要找的东西，非常感谢！