Laravel-datatables: Cara membuat baris anak / Detail anak

Hai,

Ikuti saja apa yang ditampilkan tautan itu di sisi javascript dan itu akan berfungsi seperti yang diharapkan. Satu-satunya perbedaan pada contoh itu adalah Anda harus menggunakan skrip sisi server DT.

Di sisi lain, saya pikir saya akan menambahkan ini di Aplikasi Demo yang telah saya kerjakan akhir-akhir ini. Akan membuat Anda tetap diposting di sini ketika demo untuk Detail Baris sudah siap. Juga periksa untuk Anda melihat bagaimana menggunakan paket pada skenario tertentu.

Bersulang!

Di bawah ini adalah contoh skrip yang dapat Anda gunakan untuk mengimplementasikannya.

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

Di pengontrol Anda

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

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

Selesai menambahkan contoh Detail Baris di Aplikasi Demo, cukup periksa untuk melihat cara kerjanya. Terima kasih!

tidak yakin pada kesalahan js tetapi Anda harus memiliki sesuatu seperti ini di skrip Anda. Menggunakan templat bilah pegangan dan kemudian meneruskan data 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');
        }
    });

Yup maaf, kode berfungsi saya hanya perlu menghapus data lain setelah 'tindakan',
Detailnya bisa diklik di sisi kiri tabel, masalahnya ikonnya tidak muncul.. Sudah download tombol dari demo Anda :?

Saya pikir css belum masuk..
Saya buruk, terima kasih atas respon cepatnya :+1:

Inilah cara saya melakukan semuanya dari pengontrol saya, saya harap ini membantu seseorang yang tidak ingin implementasi dari js, sebenarnya kami memanggil js tetapi dari pengontrol laravel kami,

$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");
                    }
                });
            }',
        ]);

Sekarang akhirnya di dalam file blade (yang dalam kasus saya "admin> halaman> formulir> handleBarInfo.blade.php") Anda dapat menulis kondisi apa pun yang Anda inginkan

{{ $userData->email }}

Dan inilah file indeks saya di mana semua tabel data dirender

@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>

Inilah cara saya melakukan semuanya dari pengontrol saya, saya harap ini membantu seseorang yang tidak ingin implementasi dari js, sebenarnya kami memanggil js tetapi dari pengontrol laravel kami,

$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");
                    }
                });
            }',
        ]);

Sekarang akhirnya di dalam file blade (yang dalam kasus saya "admin> halaman> formulir> handleBarInfo.blade.php") Anda dapat menulis kondisi apa pun yang Anda inginkan

{{ $userData->email }}

Dan inilah file indeks saya di mana semua tabel data dirender

@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>

bisakah kita memasukkan ajax ke dalam pengontrol php kita? seperti yang Anda lakukan, Anda memanggil js di dalam pengontrol. apakah mungkin jika kita meletakkan ajax di dalam js di controller?

Saya tahu ini sudah tua, tetapi hanya untuk menyebutkan, @vipertecpro , implementasi Anda memiliki satu bug karena drawCallback dijalankan pada setiap tabel yang dimuat ulang, jadi ketika Anda memuat halaman Anda, itu berfungsi seperti yang diharapkan. Jika Anda memuat ulang Anda dapat didata (bukan seluruh halaman) itu berjalan lagi, jadi itu berjalan dua kali (tampilkan-sembunyikan) saat mengklik (dan info tidak ditampilkan). Jika Anda memuat ulang lagi, itu berjalan tiga kali dan info ditampilkan (tampilkan-sembunyikan-tampilkan) dan seterusnya ....

Saya pikir Anda harus menggunakan 'initComplete' untuk ini.