Laravel-datatables: चाइल्ड रो / चाइल्ड डिटेल कैसे बनाएं

नमस्ते,

बस उस लिंक का पालन करें जो जावास्क्रिप्ट पक्ष पर दिखाता है और इसे अपेक्षा के अनुरूप काम करना चाहिए। उस उदाहरण में एकमात्र अंतर यह है कि आपको डीटी की सर्वर साइड स्क्रिप्ट का उपयोग करना होगा।

दूसरी ओर, मुझे लगता है कि मैं इसे उस डेमो ऐप पर जोड़ दूंगा जिस पर मैं हाल ही में काम कर रहा हूं। पंक्ति विवरण के लिए डेमो तैयार होने पर आपको यहां पोस्ट करता रहेगा। यह भी देखें कि कुछ परिदृश्यों पर पैकेज का उपयोग कैसे करें।

चीयर्स!

नीचे एक उदाहरण स्क्रिप्ट है जिसका उपयोग आप इसे लागू करने के लिए कर सकते हैं।

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

डेमो ऐप पर पंक्ति विवरण उदाहरण जोड़ने का काम पूरा हुआ, बस इसे देखें कि यह कैसे काम करता है। धन्यवाद!

जेएस त्रुटि पर निश्चित नहीं है लेकिन आपकी स्क्रिप्ट पर ऐसा कुछ होना चाहिए। हैंडल बार टेम्प्लेट का उपयोग करना और फिर डेटा पास करना 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');
        }
    });

हाँ क्षमा करें, कोड काम कर रहा है मुझे 'कार्रवाई' के बाद अन्य डेटा को हटाने की जरूरत है,
विवरण तालिका के बाईं ओर क्लिक किया जा सकता है, समस्या यह है कि आइकन दिखाई नहीं दे रहा है.. हालांकि पहले से ही अपने डेमो से बटन डाउनलोड करें :?

मुझे लगता है कि सीएसएस अभी तक डाला नहीं गया है ..
मेरा बुरा, तेज़ प्रतिक्रिया के लिए धन्यवाद: +1:

यहां बताया गया है कि मैंने यह सब अपने नियंत्रक से कैसे किया, मुझे आशा है कि यह किसी ऐसे व्यक्ति की मदद करता है जो जेएस से कार्यान्वयन नहीं चाहता है, असल में हम जेएस को कॉल कर रहे हैं लेकिन हमारे लार्वा नियंत्रक से,

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

अब अंत में ब्लेड फ़ाइल के अंदर (जो मेरे मामले में है "व्यवस्थापक> पृष्ठ> प्रपत्र> हैंडलबारइन्फो.ब्लेड.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>

यहां बताया गया है कि मैंने यह सब अपने नियंत्रक से कैसे किया, मुझे आशा है कि यह किसी ऐसे व्यक्ति की मदद करता है जो जेएस से कार्यान्वयन नहीं चाहता है, असल में हम जेएस को कॉल कर रहे हैं लेकिन हमारे लार्वा नियंत्रक से,

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

अब अंत में ब्लेड फ़ाइल के अंदर (जो मेरे मामले में है "व्यवस्थापक> पृष्ठ> प्रपत्र> हैंडलबारइन्फो.ब्लेड.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 डाल सकते हैं? जैसे आप करते हैं, आप नियंत्रक के अंदर जेएस कॉल कर रहे हैं। क्या यह संभव है अगर हम नियंत्रक पर जेएस के अंदर अजाक्स डालते हैं?

मुझे पता है कि यह पुराना है, लेकिन केवल उल्लेख करने के लिए, @vipertecpro , आपके कार्यान्वयन में एक बग है क्योंकि प्रत्येक टेबल रीलोड पर drawCallback निष्पादित किया जाता है, इसलिए जब आप अपना पृष्ठ लोड करते हैं, तो यह अपेक्षा के अनुसार काम करता है। यदि आप आपको डेटाटेबल (पूरे पृष्ठ पर नहीं) पुनः लोड करते हैं तो यह फिर से चलता है, इसलिए क्लिक करते समय यह दो बार (शो-छिपाएं) चलता है (और जानकारी नहीं दिखाती है)। यदि आप फिर से लोड करते हैं, तो यह तीन बार चलता है और जानकारी दिखाई जाती है (शो-छुपा-शो) और इसी तरह ....

मुझे लगता है कि आपको इसके लिए 'initComplete' का उपयोग करना चाहिए।