Laravel 数据表自定义 select 搜索
Laravel Datatables custom select search
如果您想查看在给定日期过期的 domens,我有一个带有 select 选项的下拉菜单。
但是一旦我选择了日期,我将获得具有正确结果的纯 json 代码。
这是我上面的表格 table
<form method="post" action="{{ action('DomenController@tabela') }}" id="klijent_rok" onchange="document.getElementById('klijent_rok').submit()">
@csrf
<div class="form-group row">
<label for="istice_za" class="ml-md-auto col-form-label text-md-left" style="padding-right: 10px;">Ističu u roku od:</label>
<select name="istice_za" id="istice_za" class="form-control" style="width: 140px" size="1">
<option value="99" @if($istice_za == '99') selected='selected' @endif>-neodređeno-</option>
<option value="7" @if($istice_za == '7') selected='selected' @endif>za 7 dana</option>
<option value="30" @if($istice_za == '30') selected='selected' @endif>za 30 dana</option>
<option value="60" @if($istice_za == '60') selected='selected' @endif>za 60 dana</option>
<option value="istekli" @if($istice_za == 'istekli') selected='selected' @endif>istekli</option>
</select>
<a href="/lista-domena" class="btn btn-info" style="height: 37px; margin-left: 10px; margin-right: 15px">Poništite filtere</a>
</div>
</form>
这是服务器端数据的我的控制器table
if(!empty($request->istice_za) && $request->istice_za != 99) {
$date = Carbon::now();
$new_date = Carbon::now();
if($request->istice_za != 'istekli') {
if($request->istice_za == 7) {
$istice_za = 7;
$new_date->addDays(7);
}
if($request->istice_za == 30) {
$istice_za = 30;
$new_date->addDays(30);
}
if($request->istice_za == 60) {
$istice_za = 60;
$new_date->addDays(60);
}
$domen = Domen::where('datum_end', '<', $new_date)
->Where('datum_end', '>', $date)
->with('klijent');
}
else {
$domen = Domen::where('datum_end', '<', $date)->with('klijent');
$istice_za = 'istekli';
}
}
else {
$domen = Domen::with('klijent');
$istice_za = 99;
}
return datatables()->of($domen)->make(true);
这些是我的路线
Route::get('/lista-domena/tabela', 'DomenController@tabela');
Route::post('/lista-domena/tabela', 'DomenController@tabela');
我做错了什么,没有在我的 table 中获取该数据?
首先,您的代码不是运行查询,您需要添加->get()
或first()
来获取数据。
$domen = Domen::where('datum_end', '<', $date)->with('klijent')->get();
或者,
$domen = Domen::with('klijent')->get();
我设法解决了。问题是我没有将数据从 select 发送到我的控制器。我将我的表格编辑成这样:
<form method="post" action="{{ action('DomenController@tabela') }}" id="klijent_rok">
然后在脚本中添加:
$('#klijent_rok').on('change', function(e) {
table.draw();
});
并将Ajax更改为:
ajax: {
url: '/lista-domena/tabela',
data: function ( d ) {
d.istice_za = $('#istice_za').val();
},
}...
Html:
<table id="affected-requirement-table" class="table table-hover table-sm table-bordered">
<!--Table head-->
<thead>
<tr>
<th>Requirements</th>
<th>Effect Type</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<!-- Ajax Load -->
</tbody>
<!--Table body-->
</table>
Jquery
$(document).ready(function () {
var affectedRequirementsTable = $('#affected-requirement-table').DataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
processing: true,
serverSide: true,
bFilter: false,
"bInfo": false,
"bPaginate": true,
"ordering": false,
"bLengthChange": false,
ajax: {
url: '{!! \Illuminate\Support\Facades\URL::to("cr/requirements-datatables") !!}'
},
columns: [
{data: 'number'},
{data: 'effect-type'}
],
// "fnCreatedRow" : function (row, data, dataIndex) {
// var div = document.createElement("div");
// $(div).html('<select name= "changeRequest[]" class="form-control effect-type-select" id="mySelect"> <option selected="selected" value="None">None</option> <option value="Addition">Addition</option> <option value="Deletion">Deletion</option> </select>');
// $(row).children("td:last-child").append(div);
// }
});
// draw the table
affectedRequirementsTable.draw();
$("#affected-requirement-table").on('change',".effect-type-select",function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
console.log(valueSelected);
});
})
路线:
Route::get('cr/requirements-datatables', "ChangeRequestController@requirementsAndEffectTypesDatatables");
控制器:
public function requirementsAndEffectTypesDatatables(ChangeRequests $request)
{
$changeRequest = DB::table('requirement')->select(['number','id']);
return DataTables::of($changeRequest)->addColumn('effect-type', function ($changeRequest) {
return '
<select name= "changeRequest[]" class="form-control effect-type-select" id="mySelect">
<option selected="selected" value="None">None</option>
<option value="Addition">Addition</option>
<option value="Deletion">Deletion</option>
</select>';
})->rawColumns(['effect-type'])->make(true);
}
如果您想查看在给定日期过期的 domens,我有一个带有 select 选项的下拉菜单。
但是一旦我选择了日期,我将获得具有正确结果的纯 json 代码。 这是我上面的表格 table
<form method="post" action="{{ action('DomenController@tabela') }}" id="klijent_rok" onchange="document.getElementById('klijent_rok').submit()">
@csrf
<div class="form-group row">
<label for="istice_za" class="ml-md-auto col-form-label text-md-left" style="padding-right: 10px;">Ističu u roku od:</label>
<select name="istice_za" id="istice_za" class="form-control" style="width: 140px" size="1">
<option value="99" @if($istice_za == '99') selected='selected' @endif>-neodređeno-</option>
<option value="7" @if($istice_za == '7') selected='selected' @endif>za 7 dana</option>
<option value="30" @if($istice_za == '30') selected='selected' @endif>za 30 dana</option>
<option value="60" @if($istice_za == '60') selected='selected' @endif>za 60 dana</option>
<option value="istekli" @if($istice_za == 'istekli') selected='selected' @endif>istekli</option>
</select>
<a href="/lista-domena" class="btn btn-info" style="height: 37px; margin-left: 10px; margin-right: 15px">Poništite filtere</a>
</div>
</form>
这是服务器端数据的我的控制器table
if(!empty($request->istice_za) && $request->istice_za != 99) {
$date = Carbon::now();
$new_date = Carbon::now();
if($request->istice_za != 'istekli') {
if($request->istice_za == 7) {
$istice_za = 7;
$new_date->addDays(7);
}
if($request->istice_za == 30) {
$istice_za = 30;
$new_date->addDays(30);
}
if($request->istice_za == 60) {
$istice_za = 60;
$new_date->addDays(60);
}
$domen = Domen::where('datum_end', '<', $new_date)
->Where('datum_end', '>', $date)
->with('klijent');
}
else {
$domen = Domen::where('datum_end', '<', $date)->with('klijent');
$istice_za = 'istekli';
}
}
else {
$domen = Domen::with('klijent');
$istice_za = 99;
}
return datatables()->of($domen)->make(true);
这些是我的路线
Route::get('/lista-domena/tabela', 'DomenController@tabela');
Route::post('/lista-domena/tabela', 'DomenController@tabela');
我做错了什么,没有在我的 table 中获取该数据?
首先,您的代码不是运行查询,您需要添加->get()
或first()
来获取数据。
$domen = Domen::where('datum_end', '<', $date)->with('klijent')->get();
或者,
$domen = Domen::with('klijent')->get();
我设法解决了。问题是我没有将数据从 select 发送到我的控制器。我将我的表格编辑成这样:
<form method="post" action="{{ action('DomenController@tabela') }}" id="klijent_rok">
然后在脚本中添加:
$('#klijent_rok').on('change', function(e) {
table.draw();
});
并将Ajax更改为:
ajax: {
url: '/lista-domena/tabela',
data: function ( d ) {
d.istice_za = $('#istice_za').val();
},
}...
Html:
<table id="affected-requirement-table" class="table table-hover table-sm table-bordered">
<!--Table head-->
<thead>
<tr>
<th>Requirements</th>
<th>Effect Type</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<!-- Ajax Load -->
</tbody>
<!--Table body-->
</table>
Jquery
$(document).ready(function () {
var affectedRequirementsTable = $('#affected-requirement-table').DataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
processing: true,
serverSide: true,
bFilter: false,
"bInfo": false,
"bPaginate": true,
"ordering": false,
"bLengthChange": false,
ajax: {
url: '{!! \Illuminate\Support\Facades\URL::to("cr/requirements-datatables") !!}'
},
columns: [
{data: 'number'},
{data: 'effect-type'}
],
// "fnCreatedRow" : function (row, data, dataIndex) {
// var div = document.createElement("div");
// $(div).html('<select name= "changeRequest[]" class="form-control effect-type-select" id="mySelect"> <option selected="selected" value="None">None</option> <option value="Addition">Addition</option> <option value="Deletion">Deletion</option> </select>');
// $(row).children("td:last-child").append(div);
// }
});
// draw the table
affectedRequirementsTable.draw();
$("#affected-requirement-table").on('change',".effect-type-select",function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
console.log(valueSelected);
});
})
路线:
Route::get('cr/requirements-datatables', "ChangeRequestController@requirementsAndEffectTypesDatatables");
控制器:
public function requirementsAndEffectTypesDatatables(ChangeRequests $request)
{
$changeRequest = DB::table('requirement')->select(['number','id']);
return DataTables::of($changeRequest)->addColumn('effect-type', function ($changeRequest) {
return '
<select name= "changeRequest[]" class="form-control effect-type-select" id="mySelect">
<option selected="selected" value="None">None</option>
<option value="Addition">Addition</option>
<option value="Deletion">Deletion</option>
</select>';
})->rawColumns(['effect-type'])->make(true);
}