誰かがDatatableにサービス実装としてカスタムフィルターを実装する方法の簡単な例で私を説明できますか? チュートリアルからは理解できませんでした。
説明できるか試してみましょう。
DTサービスクラスには、クライアント側へのajaxjson応答を処理するajax()
メソッドがあります。 これは、列を編集/追加するなどしてjson応答を変換する場所です...
もう1つのメソッドは、DTで使用される基本クエリを処理するquery()
メソッドです。 このクラスには、 Request
インスタンスにアクセスするために使用できるrequest()
メソッドがあります。 以下のスニペットの例を参照してください。
public function ajax()
{
return $this->datatables
->eloquent($this->query())
->addColumn('action', 'audits.audit.datatables.action')
->make(true);
}
public function query()
{
$audits = Audit::query();
if ($this->request()->get('auditType')) {
$audits->where('type', $this->request()->get('auditType'));
}
return $this->applyScopes($audits);
}
お役に立てれば。 間もなくサービス実装のデモを追加しようとします。
ありがとう。 私はこの部分を手に入れました。 クライアントからajaxデータを送信してからテーブルを再描画する方法を教えてください。
DTのpreXHR
イベントにjsをフックして、カスタムデータをサーバーに渡します。 https://datatables.net/reference/event/preXhr
現在、カスタムフィルタは機能しますが、ページ付けは機能しません。
おかげで、私はそれを解決しました。
こんにちは私は例を見ることができますか?
@yajraによる上記のコードスニペットを参照してください。 または、JavaScriptスニペットをお探しの場合は教えてください。
上記の「auditType」を使用したリクエストの例では、これはどこから投稿されていますか? ブレード? コントローラーから投稿できますか?
Javascriptから、サンプルコードを次に示します。
$( '#dataTableBuilder')
.on( 'preXhr.dt'、function(e、settings、data){
data.auditType = $( 'input [name = auditType')。val();
});
<input type="text" onchange="abc(this.value)" >
function abc(a) {
$('.datatable')
.on('preXhr.dt', function ( e, settings, data ) {
data.auditType = a;
});
}
サー、iamもdatatableサービスを使用していますが、onchange後にデータを読み込めないのはなぜですか。
こんにちは私は次のようにします:私は変更イベントをキャッチし、次のようにデータテーブルのリロードボタンをクリックします:
$(selector).on( 'change'、function(){
$( '。buttons-reload')。click();
});
テーブルを更新する正しい方法はよくわかりませんが、機能します。
こんにちは、助けていただけませんか? この場合、誰がリクエストを行いますか。
私の見解:
<input type="text" name="abc">
<div class="col-md-12">
{!! $dataTable->table(['style'=>'width:100%', 'class'=>'table table-striped table-hover']) !!}
</div>
ClientsDataTable:
`
パブリック関数query()
{{
$ワークステーションID = Auth :: user()-> activeWorkstation()-> id;
$clients = Client::where('workstation_id', $workstation_id)->with('addresses')->with('devices');
if ($this->request()->get('abc')) {
$clients->where('name', $this->request()->get('abc'));
}
return $this->applyScopes($clients);
}
JS:
$('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
data.abc= $('input[name=abc]').val();
});
`
助けてください、誰がリクエストを送信するのかわかりません。
データテーブルは、カスタムフィルタの値を変更するたびにリクエストを行います。
次のように、入力でchange、keyup、またはkeydownイベントをキャッチする必要があります。
$(selector).on('change',function(){
$('.buttons-reload').click();
});
buttons-reloadは、データテーブルクラスで構成するボタンです。
public function html()
{
return $this->builder()
->columns($this->getColumns())
->addAction(['width' => '35%'])
->parameters([
'language' => [
'url' => '//cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json'
],
"lengthMenu" => [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"pagingType" => "full_numbers",
'dom' => 'lBfrtip',
'scrollX' => true,
**'buttons' => [
'reload'
],**
]);
}
したがって、入力のキーを押してイベントをキャッチすると、データテーブルのリロードボタンがクリックされ、リクエストがトリガーされ、データテーブルクラスが入力値をキャッチして、実行する必要のあるクエリに適用されます。
それは私にとってはうまくいきますが、おそらくそれを機能させるためのより良い方法です。
こんにちは、
クエリをリロードしましたが、渡されたデータはありませんでした。 なにか提案を?
できます!!! 申し訳ありませんが、次のような「変更時」イベントにpreXhr.dtを追加するのを忘れました。
$('input[name=abc]').on('change',function(){
$('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
data.abc= $('input[name=abc]').val();
});
$('.buttons-reload').click();
});
興味のある人のためにこれをここに残しておきます;)
$(document).ready(function () {
$('.js-datatable-filter-form :input').on('change', function (e) {
window.LaravelDataTables["dataTableBuilder"].draw();
});
$('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
$('.js-datatable-filter-form :input').each(function () {
data[$(this).prop('name')] = $(this).val();
});
});
});
追加のフィルターデータは、 request()
関数を介して取得できます。 スコープを使用すると、結果をバックエンドでフィルタリングできます。
<?php namespace App\DataTables\Scopes;
use Yajra\Datatables\Contracts\DataTableScopeContract;
class ArchivedScope implements DataTableScopeContract
{
public function apply($query)
{
$query->onlyTrashed();
return $query;
}
}
コントローラメソッドの例:
public function archived(UserDataTable $dataTable)
{
$dataTable->addScope(new App\DataTables\Scopes\ArchivedScope());
return $dataTable->render('admin.users.index');
}
ここで、 apply
メソッドのrequest()
関数に注意してください。
<?php namespace App\DataTables\Scopes;
use Yajra\Datatables\Contracts\DataTableScopeContract;
class RoleScope implements DataTableScopeContract
{
public function apply($query)
{
if ($roleId = request('role_id')) {
$query->where('role_id', $roleId);
}
return $query;
}
}
スコープの詳細については、 https :
最も参考になるコメント
興味のある人のためにこれをここに残しておきます;)
Javascript
追加のフィルターデータは、
request()
関数を介して取得できます。 スコープを使用すると、結果をバックエンドでフィルタリングできます。スコープの例:
アーカイブされたスコープ
コントローラメソッドの例:
役割の範囲
ここで、
apply
メソッドのrequest()
関数に注意してください。スコープの詳細については、 https :