Laravel-datatables: 1ページの異なるタブで2つのデータテーブルをレンダリングする方法

作成日 2017年06月12日  ·  9コメント  ·  ソース: yajra/laravel-datatables

問題または機能のリクエストの概要


こんにちは、こんにちは。
何か質問したいのですが、助けが必要です。2つのタブがあるページを作成しました。タブ#1は1日あたりのデータを表示し、タブ#2は1時間あたりのデータを表示しています。その2つのタブで同じテーブルを作成しようとしていますが、それはタブ#1に表示され、タブ#2には列の名前のみが表示されますが、なぜこれが発生するのですか?

問題のコードスニペット

私は間違ったものが私のコントローラーにあると思った、これはコードです:

public function index(InsightDataTable $dataTable)
    {
        return $dataTable->render('admin.report.insight.index');
    }

だから私はコントローラーで複数のデータテーブルをレンダリングする方法を尋ねたいです。
ありがとうございました。
ああ、これは私のindex.blade.phpのコードです

@section('content')
    @include('admin.notification')
    <div class="row">
            <div class="col-xs-12">

                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="hari"><a href="#hari" data-toggle="tab">Hari</a></li>
                        <li class="jam"><a href="#jam" data-toggle="tab">Jam</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="hari tab-pane" id="hari">
                        <div class="row">
                <div class="btn-group pull-right" style="margin: 0 15px 15px 0;">
                    <a href="" class="btn btn-primary btn-header" id="export_file">{{ trans('label.download_excel') }}</a> 
                </div>
            </div>
                <div class="box">
                <div class="box-body">
                <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Period:&nbsp;</td>
                                <td>
                                    <input type="text" class="form-control date-range" id="" style="width: 180px;text-align: center;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>
                    {!! $dataTable->table(['class' => 'datatable table table-striped', 'cellspacing'=>"0", 'width'=>"100%"]) !!}
                </div>
            </div>
                        </div>

                      <div class="jam tab-pane" id="jam">
                            <div class="row">
                <div class="btn-group pull-right" style="margin: 0 15px 15px 0;">
                    <a href="" class="btn btn-primary btn-header" id="export_file">{{ trans('label.download_excel') }}</a> 
                </div>
            </div>
                <div class="box">
                <div class="box-body">
                <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Period:&nbsp;</td>
                                <td>
                                    <input type="text" class="form-control date-range" id="" style="width: 180px;text-align: center;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>
                    {!! $dataTable->table(['class' => 'datatable table table-striped', 'cellspacing'=>"0", 'width'=>"100%"]) !!}
                </div>
            </div>
                      </div>

                    </div>
                  </div>
                </div>

            </div>
<strong i="16">@endsection</strong>

@section('custom_js')
    <script> 
        dateSelection = false;
        $('.date-range').daterangepicker();
        $('.date-range').on('apply.daterangepicker', function(ev, picker) {
            $('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
                data.firstDate = picker.startDate.format('YYYY-MM-DD');
                data.lastDate = picker.endDate.format('YYYY-MM-DD');
                merge_date = data.firstDate+'_'+data.lastDate;
            });       
            var table = $('#dataTableBuilder').DataTable();
           table.ajax.reload();
           dateSelection =true;                 
        });

        $("#export_file").click(function() {
            if(dateSelection == false) {
                window.location.href = "{{ url('admin/report/insight/export/all') }}";
            } else {
                window.location.href = "{{ url('admin/report/insight/export') }}/"+merge_date;
            }
            return false;
        });

    </script>
    {!! $dataTable->scripts() !!}
<strong i="17">@endsection</strong>

システムの詳細

システムに関するこれらの詳細を含めてください。 それらが省略された場合、チケットは他のユーザーのリクエスト/チケットよりも優先順位が低くなります。
  • オペレーティングシステム:Ubuntu 16.04
  • PHPバージョン:7
  • Laravelバージョン:5.2
  • Laravel-Datatablesバージョン:6.0
question

最も参考になるコメント

"一発ギャグ:

    public function show(PrimaryDataTable $primaryDataTable, SecondDataTable $secondDataTable)
    {
        /**  Depend request we need to match proper class */
        return ${request()->get('table', 'primary') . 'DataTable'}->render(
            'resource.show',
            compact('primaryDataTable', 'secondDataTable')
        );
    }

また、縮小されたajaxに注意し、このメソッドを呼び出したにajaxデータ

全てのコメント9件

ただし、テーブルにサービスベースのアプローチを使用してから別のテーブルに異なるアプローチを使用することはあまり好きではありません。 一貫性を保つために、さらに分離する方法を知りたいです..そのような構造を作成することは可能ですか?:

UsersDatatableController
ユーザーのデータテーブルを独占的に処理します
ビューは、データテーブルをレンダリングし、ajaxリクエストを処理するためだけのものです

PostsDatatableController
投稿のデータテーブルのみを処理します(一般またはユーザーに関連)
ビューは、データテーブルをレンダリングし、ajaxリクエストを処理するためだけのものです

UsersController
UsersDatatableControllerとPostsDatatableControllerを使用してレンダリングし、それらを同じビュー、タブ、オーバーアンダーなどに配置します。データテーブルのajax呼び出しはこのコントローラーでは処理されません。 このコントローラーの構想は、通常のページではなく編集フォーム用であり、その中にデータテーブルがあります。

私のユースケースはサーバーサイドのデータテーブルをレンダリングするためのものなので、
https://github.com/imanghafoori1/laravel-widgetize
この
https://stackoverflow.com/questions/41857905/using-laravel-controllers-as-components-to-build-a-view

@yajra
Lemmeはあなたの考えを知っていますthx

@isometriq atm、デフォルトでは、同じルート内で2つのDataTableクラスをajax処理に使用することはできないと思います。 ただし、要求されているajax応答を識別するために使用できるパラメーターを追加できる場合があります。

public function index(UsersDatatable $udt, PostsDatatable $pdt) {
  if (request()->get('table') == 'posts') {
    return $udt->render('my.view', compact('udt', 'pdt'));
  }

  return $pdt->render('my.view', compact('udt', 'pdt'));
}

その後、ビューの両方のDTにビルダーを使用できます。

{!! $udt->html()->table() !!} // users table
{!! $pdt->html()->table() !!} // posts table

{!! $udt->scripts() !!} // users table scripts
{!! $pdt->scripts() !!} // posts table scripts

あなたが探検してみることができるという単なる考え。 ありがとう!

ありがとう@yajra私はいくつかのことを試してみます

この質問をありがとう。 @yajraが提案したように、これを機能さ

{!! $udt->html()->table(['id' => 'udt']) !!} // users table
{!! $pdt->html()->table(['id' => 'pdt']) !!} // posts table

{!! $udt->html()->scripts() !!} // users table scripts
{!! $pdt->html()->scripts() !!} // posts table scripts

jsが正しく機能するように、各テーブルに一意のid属性を渡す必要があります。 これが誰かを助けることを願っています!

また、DataTableクラスで、html()メソッドに追加のパラメーターを渡しました。

public function html() {

    return $this->builder()
        ->ajax(['data' => 'function(d) { d.table = "posts"; }'])
        ->parameters($this->getBuilderParameters());
}

@ yajrahttps: //datatables.yajrabox.com/services/two-datatablesの最新のドキュメントに代わりにこの例があればいいでしょう。

@benlwongフィードバックをありがとう。 デモのソースコードはこちらから入手でき

みなさん、こんにちは。私はこの投稿の解決策に従い、2つのデータテーブルが同時に機能することを達成しました。
しかし..一般的なページがロードされているときに、両方が同時にロードされることは望ましくありません。

特定のタブ/ボタンをクリックしたときに2番目のデータテーブルをロードしたい。
私はそれをページで見ました: https

function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {
        $('#postsTable').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            buttons: [
                'csv', 'excel', 'pdf', 'print', 'reset', 'reload'
            ],
            ajax: '/services/two-datatables/posts',
            columns: [
                {data: 'id', name: 'posts.id'},
                {data: 'title', name: 'posts.title'},
                {data: 'created_by', name: 'users.name', width: '110px'},
                {data: 'created_at', name: 'posts.created_at', width: '120px'},
                {data: 'updated_at', name: 'posts.updated_at', width: '120px'},
            ],
            order: [[0, 'desc']]
        });
    }
}

これは基本的に、datatableのJSをラップするifステートメントを追加することで構成されていますが、この投稿で行っていたように、DataTableServiceの実装によるソリューションが必要です。 このようなもの:

function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {

        {!! $secondDataTable->html()->scripts() !!}

    }
}

ただし、関数「scripts()」がタグを出力するため、これは実行できません。

関連する問題

hohuuhau picture hohuuhau  ·  3コメント

SGarridoDev picture SGarridoDev  ·  3コメント

FilipeBorges1993 picture FilipeBorges1993  ·  3コメント

vipin733 picture vipin733  ·  3コメント

Abdulhmid picture Abdulhmid  ·  3コメント