Laravel-datatables: 子行の作成方法/子の詳細

やあ、

そのリンクがjavascript側に表示されているとおりに実行すると、期待どおりに機能するはずです。 この例の唯一の違いは、DTのサーバー側スクリプトを使用する必要があることです。

一方、私は私が上でこれを追加すると思いますデモアプリケーション私は最近に取り組んできたこと。 行の詳細のデモの準備ができたら、ここに投稿し続けます。 また、特定のシナリオでパッケージをどのように使用するかについても確認してください。

乾杯！

以下は、これを実装するために使用できるスクリプトの例です。

var table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ url("users-data") }}',
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'updated_at', name: 'updated_at'}
        ],
        order: [[1, 'asc']]
    });

    // Add event listener for opening and closing details
    $('#users-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    });

    /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the row
        return '<table class="table">'+
            '<tr>'+
                '<td>Full name:</td>'+
                '<td>'+d.name+'</td>'+
                '</tr>'+
            '<tr>'+
                '<td>Email:</td>'+
                '<td>'+d.email+'</td>'+
                '</tr>'+
            '<tr>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
                '</tr>'+
            '</table>';
    }

コントローラー上

public function getUsersData()
{
        $users = User::select(['id', 'name', 'email', 'created_at', 'updated_at']);

        return Datatables::of($users)->make(true);
}

上の行の詳細例の追加が完了デモアプリケーションだけで、それがどのように動作するかを確認するためにそれをチェックアウト。 ありがとう！

jsエラーについてはわかりませんが、スクリプトには次のようなものが必要です。 ハンドルバーテンプレートを使用して、データtemplate(row.data())渡します。

var template = Handlebars.compile($("#details-template").html());

// Add event listener for opening and closing details
    $('#users-table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( template(row.data()) ).show();
            tr.addClass('shown');
        }
    });

申し訳ありませんが、コードが機能しているので、「アクション」の後に他のデータを削除する必要があります。
詳細はテーブルの左側でクリックできますが、問題はアイコンが表示されていないことです。ただし、デモからボタンをダウンロードしてください：？

cssはまだ挿入されていないと思います。
私の悪い、速い応答をありがとう：+1：

これが私のコントローラーからすべてを行った方法です。これがjsからの実装を望まない人に役立つことを願っています。実際にはjsを呼び出していますが、laravelコントローラーからです。

$model = User::all();
if (request()->ajax()) {
   return DataTables::make($model)
    ->addIndexColumn()
    ->addColumn('handleBarColumn',function(User $userData){
            return view('admin.pages.forms.handleBarInfo',compact('userData'));
    })
    ->rawColumns(['handleBarColumn'])
        ->toJson();
}
$html = $builder->columns([
       ['title' => '','className' => 'details-control','orderable'  => false, 'data' => null,'searchable' => false,'defaultContent' => '','width' => '20px'],
    // ['data' => 'DT_RowIndex', 'name' => 'DT_RowIndex', 'title' => '#','orderable' => 'false','searchable' => 'false'],
       ['data' => 'email', 'name' => 'email', 'title' => 'Email'],
       ['data' => 'handleBarColumn', 'name' => 'handleBarColumn', 'title' => '','visible' => false,'orderable'  => false]
  ])->parameters([
            'dom'           => 'Bfrtip',
            'paging'        => true,
            'searching'     => true,
            'info'          => true,
            'buttons'       => [ 'csv' , 'excel' , 'pdf'],
            'order'         => [1,'asc'],
            'drawCallback' => 'function () {
                function format ( d ) {
                    return d.handleBarColumn;
                }
                let table = $("#formDataTables").DataTable();
                $("#formDataTables tbody").on("click", "td.details-control", function () {
                    let tr = $(this).closest("tr");
                    let row = table.row( tr );
                    if ( row.child.isShown() ) {
                        row.child.hide();
                        tr.removeClass("shown");
                    }
                    else {
                        row.child(format(row.data())).show();
                        tr.addClass("shown");
                    }
                });
            }',
        ]);

最後に、ブレードファイル（私の場合は「admin>ページ>フォーム> handleBarInfo.blade.php」）内に、任意の条件を記述できます。

{{ $userData->email }}

そして、これがすべてのデータテーブルがレンダリングされる私のインデックスファイルです

@extends('admin.layout.app')

@section('content')
    <div class="ibox">
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                    {!! $html->table(['class' => 'table table-striped table-bordered', 'id' => 'formDataTables']) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
<strong i="12">@endsection</strong>
@section('styles')
    <style>
        #formDataTables tbody td.details-control {
            background-image: url('{{ asset('assets/admin/images/details_open.png') }}');
            cursor: pointer;
            background-repeat:  no-repeat;
            background-position: center;
            background-origin: content-box;
            background-size: cover;
            padding: 7px;
        }
        #formDataTables tbody tr.shown td.details-control {
            background-image: url('{{ asset('assets/admin/images/details_close.png') }}');
            cursor: pointer;
            background-repeat:  no-repeat;
            background-position: center;
            background-origin: content-box;
            background-size: cover;
            padding: 7px;
        }

        #formDataTables tbody tr .rowDetails p {
            font-size: 14px;
            font-weight: 800;
            float: left;
            margin-right: 10px;
            padding: 1px;
            margin-bottom: 0;
        }
        #formDataTables tbody tr .rowDetails a{

        }
        #formDataTables tbody tr .rowDetails td{
            padding: 5px;
        }
        .m-r-10{
            margin-right: 10px !important;
        }
    </style>
<strong i="13">@endsection</strong>
@section('scripts')
    {!! $html->scripts() !!}
<strong i="14">@endsection</strong>

これが私のコントローラーからすべてを行った方法です。これがjsからの実装を望まない人に役立つことを願っています。実際にはjsを呼び出していますが、laravelコントローラーからです。

$model = User::all();
if (request()->ajax()) {
   return DataTables::make($model)
  ->addIndexColumn()
  ->addColumn('handleBarColumn',function(User $userData){
          return view('admin.pages.forms.handleBarInfo',compact('userData'));
  })
  ->rawColumns(['handleBarColumn'])
        ->toJson();
}
$html = $builder->columns([
       ['title' => '','className' => 'details-control','orderable'  => false, 'data' => null,'searchable' => false,'defaultContent' => '','width' => '20px'],
    // ['data' => 'DT_RowIndex', 'name' => 'DT_RowIndex', 'title' => '#','orderable' => 'false','searchable' => 'false'],
       ['data' => 'email', 'name' => 'email', 'title' => 'Email'],
       ['data' => 'handleBarColumn', 'name' => 'handleBarColumn', 'title' => '','visible' => false,'orderable'  => false]
  ])->parameters([
            'dom'           => 'Bfrtip',
            'paging'        => true,
            'searching'     => true,
            'info'          => true,
            'buttons'       => [ 'csv' , 'excel' , 'pdf'],
            'order'         => [1,'asc'],
            'drawCallback' => 'function () {
                function format ( d ) {
                    return d.handleBarColumn;
                }
                let table = $("#formDataTables").DataTable();
                $("#formDataTables tbody").on("click", "td.details-control", function () {
                    let tr = $(this).closest("tr");
                    let row = table.row( tr );
                    if ( row.child.isShown() ) {
                        row.child.hide();
                        tr.removeClass("shown");
                    }
                    else {
                        row.child(format(row.data())).show();
                        tr.addClass("shown");
                    }
                });
            }',
        ]);

最後に、ブレードファイル（私の場合は「admin>ページ>フォーム> handleBarInfo.blade.php」）内に、任意の条件を記述できます。

{{ $userData->email }}

そして、これがすべてのデータテーブルがレンダリングされる私のインデックスファイルです

@extends('admin.layout.app')

@section('content')
    <div class="ibox">
        <div class="ibox-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                    {!! $html->table(['class' => 'table table-striped table-bordered', 'id' => 'formDataTables']) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
<strong i="13">@endsection</strong>
@section('styles')
    <style>
        #formDataTables tbody td.details-control {
            background-image: url('{{ asset('assets/admin/images/details_open.png') }}');
            cursor: pointer;
            background-repeat:  no-repeat;
            background-position: center;
            background-origin: content-box;
            background-size: cover;
            padding: 7px;
        }
        #formDataTables tbody tr.shown td.details-control {
            background-image: url('{{ asset('assets/admin/images/details_close.png') }}');
            cursor: pointer;
            background-repeat:  no-repeat;
            background-position: center;
            background-origin: content-box;
            background-size: cover;
            padding: 7px;
        }

        #formDataTables tbody tr .rowDetails p {
            font-size: 14px;
            font-weight: 800;
            float: left;
            margin-right: 10px;
            padding: 1px;
            margin-bottom: 0;
        }
        #formDataTables tbody tr .rowDetails a{

        }
        #formDataTables tbody tr .rowDetails td{
            padding: 5px;
        }
        .m-r-10{
            margin-right: 10px !important;
        }
    </style>
<strong i="14">@endsection</strong>
@section('scripts')
    {!! $html->scripts() !!}
<strong i="15">@endsection</strong>

phpコントローラー内にajaxを配置できますか？ あなたがするように、あなたはコントローラー内でjsを呼び出しています。 コントローラのjs内にajaxを配置することは可能ですか？

私はこれが古いことを知っていますが、 @ vipertecproに言及すると、drawCallbackはテーブルのリロードごとに実行されるため、実装には1つのバグがあります。したがって、ページをロードすると、期待どおりに機能します。 データテーブル（ページ全体ではない）をリロードすると、データテーブルが再度実行されるため、クリックすると2回実行されます（表示-非表示）（情報は表示されません）。 再度リロードすると、3回実行され、情報が表示されます（show-hide-show）など。

これには「initComplete」を使用する必要があると思います。