Laravel-datatables: 如何创建子行/子细节

你好，

只需按照该链接在 javascript 端显示的内容进行操作，它就会按预期工作。 该示例的唯一区别是您必须使用 DT 的服务器端脚本。

另一方面，我想我会将这个添加到我最近一直在开发的Demo App中。 当行详细信息的演示准备好时，将在此处通知您。 还可以查看它以了解如何在某些情况下使用该包。

干杯!

下面是一个示例脚本，您可以使用它来实现这一点。

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 > pages > forms > 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 > pages > forms > 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>

我们可以将 ajax 放在我们的 php 控制器中吗？ 像您一样，您在控制器内部调用 js。 如果我们将 ajax 放在控制器的 js 中，是否有可能？

我知道这是旧的，但只是提一下， @vipertecpro ，您的实现有一个错误，因为每次重新加载表时都会执行 drawCallback，因此当您加载页面时，它会按预期工作。 如果您重新加载数据表（不是整个页面），它会再次运行，因此单击时它会运行两次（显示-隐藏）（并且信息不显示）。 如果您再次重新加载，它会运行 3 次并显示信息 (show-hide-show) 等等....

我认为您应该为此使用“initComplete”。