Laravel 8 dropdown list pull from data and filter to the Data-table

Question

Laravel 8 with User & teamwork together

I am working on data-table javascript, and controller but the error is still there, and it bugged me as I am not knowledgeable with laravel as I only work on laravel for one month (it's perfect code and way better than WordPress PHP). I look at details on google, but most of them are details write dropdowns based on the hardcode selection list.

I'm using

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

and it is working fine and but not related to data table show user in the list

but when I want this dropdown can query to list of users, that where it became error

here are the controller pages I wrote

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');
    }
}

and blade pages

<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

I fear I miss something as I assume the issue is $teamlistfilter outside the statement.

[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)

You have to pass your value from controller where you show your page teamlistfliter — A.A Noman
– A.A Noman, Commented Sep 4, 2021 at 9:07
$teamlistfliter is only available inside the if. Move it outside of the if construct and pass it to the view — user8034901
– user8034901, Commented Sep 4, 2021 at 9:14
According to Passing Data To Views you need to pass the data to the view to make it available, so return view('teamlistfliter', compact('teamlistfliter')); If your request is not $request->ajax() $teamlistfliter will not be set, so move that out of the if construct, so it is available to be passed to your view — user8034901
– user8034901, Commented Sep 4, 2021 at 9:54

Steven Smith · Accepted Answer · 2021-09-05 12:00:30Z

Try get basic value from controller and use JavaScript to write on blade pages

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'));
}

and use JavaScript on blade pages

<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

that should should be working

ouflak · Accepted Answer · 2021-09-05 14:22:50Z

1

This is what I'm looking for and thank you so much!

edited Sep 5, 2021 at 14:22

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Sep 5, 2021 at 12:01

Steven Fleet

271 silver badge7 bronze badges

Collectives™ on Stack Overflow

Laravel 8 dropdown list pull from data and filter to the Data-table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related