Laravel-datatables: Как создать дочернюю строку / Дочернюю деталь

Привет,

Просто следуйте тому, что эта ссылка показывает на стороне javascript, и она должна работать должным образом. Единственная разница в этом примере состоит в том, что вам придется использовать серверный скрипт DT.

С другой стороны, я думаю, что добавлю это в демонстрационное приложение, над которым я работал в последнее время. Будем держать вас в курсе, когда будет готова демо-версия Row Details . Также проверьте это, чтобы увидеть, как использовать пакет в определенных сценариях.

Ваше здоровье!

Ниже приведен пример сценария, который вы можете использовать для реализации этого.

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

Готово, добавив пример Row Details в демонстрационном приложении, просто посмотрите, как он работает. Спасибо!

не уверен в ошибке 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 на контроллере?

Я знаю, что это старый, но просто хочу отметить,

Я думаю, вам следует использовать для этого initComplete.