Laravel-datatables: Datatableでのカスタムフィルターのサービス実装としての使用

作成日 2016年02月28日  ·  16コメント  ·  ソース: yajra/laravel-datatables

誰かがDatatableにサービス実装としてカスタムフィルターを実装する方法の簡単な例で私を説明できますか? チュートリアルからは理解できませんでした。

question

最も参考になるコメント

興味のある人のためにこれをここに残しておきます;)

Javascript

$(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

全てのコメント16件

説明できるか試してみましょう。

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

興味のある人のためにこれをここに残しておきます;)

Javascript

$(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

このページは役に立ちましたか?
0 / 5 - 0 評価