カスタムドロップダウンを使用したデータフィルターが必要です。 適切な形式で表示されるデータがあります。ドロップダウン値でデータをフィルタリングするには、ヘッダーにカスタムドロップダウンが必要です[注:laravelクエリのフィルターにこのドロップダウン値を指定する必要があります。 これはカスタム値であるため、このカスタム値を使用してデータをフィルタリングする必要があります。]
このコードはデフォルトのフィルターで機能しますが、jqueryを使用してドロップダウンを追加したので、データをフィルター処理するためにlaravelクエリでこの値を渡す必要があります。
$(function () {
var t = $('#user').DataTable({
order: [[ 0, 'desc' ]],
processing: true,
serverSide: true,
ajax: {
url: '{!! route('datatables.data') !!}',
data: function(d) {
d.name = $('input[name=name]').val();
d.email = $('input[name=email]').val();
}
},
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'arrival_date', name: 'arrival_date', orderable: true, searchable: true },
{ data: 'pick_up', name: 'pick_up', orderable: true, searchable: true },
{ data: 'destination', name: 'destination', orderable: true, searchable: true},
{ data: 'trekking_start_date', name: 'trekking_start_date', orderable: true, searchable: true},
{ data: 'trekking_end_date', name: 'trekking_end_date', orderable: true, searchable: true},
{ data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
$(document).ready(function() {
$('<label style="margin-left: 10px;">Filter by ' +
'<select class="form-control input-sm">'+
'<option value="volvo">Completed Trip</option>'+
'<option value="saab">Upcoming Trip</option>'+
'</select>' +
'</label>').appendTo("#user_wrapper #user_length");
});
そしてlaravelの私のクエリコード
public function getClients(Request $request)
{
if($request->ajax()) {
return Datatables::of(DB::select(DB::Raw('SELECT * FROM users WHERE id NOT IN (SELECT user_id FROM role_user) ORDER BY users.id DESC')))
//}))
->addColumn('arrival_date', function($user){
if(isset(Helper::getFlightsByClientID($user->id)->arrival_date)) {
return date('M j, Y', strtotime(Helper::getFlightsByClientID($user->id)->arrival_date));
} else {
return 'N/A';
}
})
->addColumn('pick_up', function($user){
if(isset(Helper::getFlightsByClientID($user->id)->pick_up)) {
return Helper::getFlightsByClientID($user->id)->pick_up == 1 ? 'Yes' : 'No';
} else {
return 'N/A';
}
})
->addColumn('destination', function($user){
if(isset(Helper::getTreksByClientID($user->id)->trekking_region_id)) {
return Helper::getTrekByID(Helper::getTreksByClientID($user->id)->trekking_region_id)->name;
} else {
return 'N/A';
}
})
->addColumn('trekking_start_date', function($user){
if(isset(Helper::getTreksByClientID($user->id)->trekking_start_date)) {
return date('M j, Y', strtotime(Helper::getTreksByClientID($user->id)->trekking_start_date));
} else {
return 'N/A';
}
})
->addColumn('trekking_end_date', function($user){
if(isset(Helper::getTreksByClientID($user->id)->trekking_end_date)) {
return date('M j, Y', strtotime(Helper::getTreksByClientID($user->id)->trekking_end_date));
} else {
return 'N/A';
}
})
->addColumn('action', function($user){
$html = '';
$html .= '<a class="btn bg-green btn-flat btn-xs" href="'.route('user.clients.edit', $user->id).'">Edit</a>';
if(auth()->user()->hasRole('superadmin')) {
$html .= ' <a onclick="if(!confirm(\'Are u sure to delete?\')) return false;" class="btn bg-red btn-flat btn-xs" href="'.route('user.clients.delete', $user->id).'">Delete</a>';
}
return $html;
})
->make(true);
} else {
abort(400, 'Bad Request.');
}
}
該当する場合は、疑わしいバグを引き起こすコードのコピーを含めてください。 マークダウンphpコードタグを使用してペーストをフォーマットできます:md5-29f7d4c1ff52f0e396b313bfe2550e56
@shankhadevpadamこれはさまざまな方法で行うことができます。 しかし、私がしていることは、サーバー側のデータテーブルの前にクエリビルダーを渡すことです。
$model = new Example();
$model->where('column_to_filter','=',$this->request->get('filter_by'));
return datatables()->eloquent($model);
もちろん、条件付きIFを実行することもできます。
$model = new Example();
if($this->request->has('name')) {
$model->where('name','=','predefined value');
}
return datatables()->eloquent($model);
私の質問は、上の画像のようにドロップダウンをバインドする方法です。カスタムjqueryを使用してバインドしましたが、データテーブルを使用してバインドする必要があります。この値は、ドロップダウンが変更されたときに使用できるはずです。[コードスニペットをご覧ください]
選択ボックスにid
を追加します。
<select class="form-control input-sm" id="custom-filter">
次に、それをリクエストパラメータに含めます。
ajax: {
url: '{!! route('datatables.data') !!}',
data: function(d) {
d.name = $('input[name=name]').val();
d.email = $('input[name=email]').val();
d.filter = $('#custom-filter').val();
}
},
次に、サーバー側で必要なフィルターを実行します。
if ($filter = request('filter')) {
$query->where('filter', $filter);
}
フィルタが変更されたときに描画をトリガーする必要があります。 多分次のようなものです:
<select class="form-control input-sm" id="custom-filter" onchange="$('#user').DataTable().draw()">
また、コレクションを使用しています。 変換
DB::select(DB::Raw('SELECT * FROM users WHERE id NOT IN (SELECT user_id FROM role_user) ORDER BY users.id DESC'))
次のようなものに:
DB::table('users')->whereNot(...);
働いてくれてありがとう。
ようこそ、プロジェクトが役に立ったら、スターを付けることを忘れないでください。 :)ありがとう!
ドロップダウンは完全に機能しますが、ドロップダウンの値が変更された後のデータ表示は正しく順序付けられていません。
フィルタリング時に日付で注文しますか? これはjs
レベルで行う必要があります。 または、デフォルトの順序をその列に設定します。
はい、どんな例でもお願いします。
例はありません。 参照については、公式のjsapiドキュメントhttps://datatables.net/reference/api/を参照して
@yajraサービスとしてdatatablesに同等のものを実装する方法は?
data: function(d) {
d.name = $('input[name=name]').val();
d.email = $('input[name=email]').val();
d.filter = $('#custom-filter').val();
}
@sistemaswebbrasil using minifiedAjax()
:
$script = '
data.name = $('input[name=name]').val();
data.email = $('input[name=email]').val();
data.filter = $('#custom-filter').val();
';
return $this
->builder()
...
->minifiedAjax($url = '', $script = null, $data = [])
最も参考になるコメント
フィルタが変更されたときに描画をトリガーする必要があります。 多分次のようなものです:
また、コレクションを使用しています。 変換
次のようなものに: