Laravel 8 下拉列表从数据中提取并筛选到 Data-table
Laravel 8 dropdown list pull from data and filter to the Data-table
Laravel 8 与用户和团队合作
我正在研究 data-table javascript 和控制器，但错误仍然存在，这让我很烦恼，因为我不了解 laravel，因为我只研究 laravel 一个月（这是完美的代码，比 WordPress PHP 好得多）。我在google上查看详情，但大部分都是根据硬编码选择列表的详情编写下拉列表。
我正在使用
<label for="selectTeam">{{ __('Team')}}</label>
<select class="form-control" id="selectTeam">
@foreach($teamlistfliter as $row)
<option>{{ $row->team }}</option>
@endforeach
</select>
它工作正常但与数据无关table在列表中显示用户
但是当我想要这个下拉列表可以查询到用户列表时，它就变成了错误
这是我写的控制器页面
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');
}
}
和 blade 页
<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)
尝试从控制器获取基本值并使用 JavaScript 写入 blade 页
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'));
}
并在 blade 页上使用 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
应该有效
这就是我要找的，非常感谢！
Laravel 8 与用户和团队合作
我正在研究 data-table javascript 和控制器，但错误仍然存在，这让我很烦恼，因为我不了解 laravel，因为我只研究 laravel 一个月（这是完美的代码，比 WordPress PHP 好得多）。我在google上查看详情，但大部分都是根据硬编码选择列表的详情编写下拉列表。
我正在使用
<label for="selectTeam">{{ __('Team')}}</label>
<select class="form-control" id="selectTeam">
@foreach($teamlistfliter as $row)
<option>{{ $row->team }}</option>
@endforeach
</select>
它工作正常但与数据无关table在列表中显示用户
但是当我想要这个下拉列表可以查询到用户列表时，它就变成了错误
这是我写的控制器页面
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');
}
}
和 blade 页
<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)
尝试从控制器获取基本值并使用 JavaScript 写入 blade 页
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'));
}
并在 blade 页上使用 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
应该有效
这就是我要找的，非常感谢！