Laravel-datatables: कैसे एक पृष्ठ अलग टैब में 2 datatable रेंडर करने के लिए

को निर्मित 12 जून 2017 · 9टिप्पणियाँ · स्रोत: yajra/laravel-datatables

समस्या या सुविधा अनुरोध का सारांश

नमस्ते, आपका दिन शुभ हो।
मैं कुछ पूछना चाहता हूं और आपकी मदद की जरूरत है, मैंने पेज बनाया जिसमें 2 टैब थे, टैब #one प्रति दिन डेटा दिखा रहा है, टैब #two प्रति घंटे डेटा दिखा रहा है, मैं उस दो टैब में एक ही टेबल बनाने की कोशिश करता हूं, लेकिन इसकी केवल टैब #one में दिखा रहा है, टैब में #two केवल कॉलम का नाम दिखा रहा है, ऐसा क्यों होता है?

समस्या का कोड स्निपेट

मुझे संदेह था कि गलत चीज़ मेरे कंट्रोलर में है, यह कोड है:

public function index(InsightDataTable $dataTable)
    {
        return $dataTable->render('admin.report.insight.index');
    }

इसलिए मैं पूछना चाहता हूँ कि कैसे नियंत्रक में कई datatable रेंडर करने के लिए।
धन्यवाद।
ओह और यह मेरी index.blade.php में कोड है

@section('content')
    @include('admin.notification')
    <div class="row">
            <div class="col-xs-12">

                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="hari"><a href="#hari" data-toggle="tab">Hari</a></li>
                        <li class="jam"><a href="#jam" data-toggle="tab">Jam</a></li>
                    </ul>
                    <div class="tab-content">

                        <div class="hari tab-pane" id="hari">
                        <div class="row">
                <div class="btn-group pull-right" style="margin: 0 15px 15px 0;">
                    <a href="" class="btn btn-primary btn-header" id="export_file">{{ trans('label.download_excel') }}</a> 
                </div>
            </div>
                <div class="box">
                <div class="box-body">
                <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Period:&nbsp;</td>
                                <td>
                                    <input type="text" class="form-control date-range" id="" style="width: 180px;text-align: center;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>
                    {!! $dataTable->table(['class' => 'datatable table table-striped', 'cellspacing'=>"0", 'width'=>"100%"]) !!}
                </div>
            </div>
                        </div>

                      <div class="jam tab-pane" id="jam">
                            <div class="row">
                <div class="btn-group pull-right" style="margin: 0 15px 15px 0;">
                    <a href="" class="btn btn-primary btn-header" id="export_file">{{ trans('label.download_excel') }}</a> 
                </div>
            </div>
                <div class="box">
                <div class="box-body">
                <table border="0" cellspacing="5" cellpadding="5">
                        <tbody>
                            <tr>
                                <td>Period:&nbsp;</td>
                                <td>
                                    <input type="text" class="form-control date-range" id="" style="width: 180px;text-align: center;">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br/>
                    {!! $dataTable->table(['class' => 'datatable table table-striped', 'cellspacing'=>"0", 'width'=>"100%"]) !!}
                </div>
            </div>
                      </div>

                    </div>
                  </div>
                </div>

            </div>
<strong i="16">@endsection</strong>

@section('custom_js')
    <script> 
        dateSelection = false;
        $('.date-range').daterangepicker();
        $('.date-range').on('apply.daterangepicker', function(ev, picker) {
            $('#dataTableBuilder').on('preXhr.dt', function ( e, settings, data ) {
                data.firstDate = picker.startDate.format('YYYY-MM-DD');
                data.lastDate = picker.endDate.format('YYYY-MM-DD');
                merge_date = data.firstDate+'_'+data.lastDate;
            });       
            var table = $('#dataTableBuilder').DataTable();
           table.ajax.reload();
           dateSelection =true;                 
        });

        $("#export_file").click(function() {
            if(dateSelection == false) {
                window.location.href = "{{ url('admin/report/insight/export/all') }}";
            } else {
                window.location.href = "{{ url('admin/report/insight/export') }}/"+merge_date;
            }
            return false;
        });

    </script>
    {!! $dataTable->scripts() !!}
<strong i="17">@endsection</strong>

सिस्टम विवरण

कृपया अपने सिस्टम के बारे में इन विवरणों को शामिल करें! यदि उन्हें छोड़ दिया जाता है, तो टिकट को अन्य उपयोगकर्ताओं के अनुरोधों / टिकटों पर चित्रित किया जाएगा।

ऑपरेटिंग सिस्टम: Ubuntu 16.04
PHP संस्करण: 7
लारवेल संस्करण: 5.2
लारवेल-डाटावेबल्स संस्करण: 6.0

question

स्रोत

faisalhilmi

👀1 👍1

सबसे उपयोगी टिप्पणी

"एक लाइन:

    public function show(PrimaryDataTable $primaryDataTable, SecondDataTable $secondDataTable)
    {
        /**  Depend request we need to match proper class */
        return ${request()->get('table', 'primary') . 'DataTable'}->render(
            'resource.show',
            compact('primaryDataTable', 'secondDataTable')
        );
    }

minified ajax के साथ भी केयरफुल रहें, इस विधि को कॉल करने के बाद ajax डेटा जोड़ें।

mgralikowski 3 दिस॰ 2020

🎉1 👍1

सभी 9 टिप्पणियाँ

https://datatables.yajrabox.com/services/two-datatables

isometriq 18 जून 2017

हालाँकि, मुझे किसी तालिका के लिए सेवा-आधारित दृष्टिकोण का उपयोग करना बहुत पसंद नहीं है, फिर दूसरे के लिए अलग। सुसंगत के लिए, मैं यह जानना चाहूंगा कि आगे भी कैसे अलग होना चाहिए .. क्या ऐसी संरचना बनाना संभव है ?:

UsersDatatableController
विशेष रूप से उपयोगकर्ताओं के लिए डेटा योग्य का ख्याल रखता है
दृश्य केवल रेंडर करने योग्य और अजाक्स अनुरोध को संभालने के लिए है

पोस्टडिटेबलकंट्रोलर
विशेष रूप से पदों के लिए डेटा योग्य का ख्याल रखता है (सामान्य या उपयोगकर्ताओं से संबंधित)
दृश्य केवल रेंडर करने योग्य और अजाक्स अनुरोध को संभालने के लिए है

UsersController
रेंडर करने के लिए UsersDatatableController और PostsDatatableController का उपयोग करें और उन्हें एक ही दृश्य में, टैब में, ओवर-अंडर के तहत रखें, जो भी .. डेटाटैबल्स के अजाक्स कॉल को इस नियंत्रक द्वारा नियंत्रित नहीं किया जाएगा। इस नियंत्रक की कल्पना एक सामान्य पृष्ठ के बजाय एक संपादन फ़ॉर्म के लिए भी हो सकती है, जिसके अंदर एक विचारणीय है।

चूँकि मेरा उपयोग मामला सर्वराइड डेटटेबल को रेंडर करने के लिए है, जिससे संयोजन करना चाहते हैं
https://github.com/imanghafoori1/laravel-widgetize
और इस
https://stackoverflow.com/questions/41857905/using-laravel-controllers-as-compenders-to-build-a-view

@ यजरा
Lemme अपने विचारों को जानते हैं thx

isometriq 18 जून 2017

@isometriq atm, मुझे लगता है कि आप डिफ़ॉल्ट रूप से ajax हैंडलिंग के लिए एक ही मार्ग के भीतर दो DataTable वर्ग का उपयोग नहीं कर सकते। हालाँकि, शायद आप अतिरिक्त पैराम जोड़ सकते हैं जिसका उपयोग आप पहचानने के लिए कर सकते हैं कि कौन सा अजाक्स प्रतिक्रिया का अनुरोध किया जा रहा है।

public function index(UsersDatatable $udt, PostsDatatable $pdt) {
  if (request()->get('table') == 'posts') {
    return $udt->render('my.view', compact('udt', 'pdt'));
  }

  return $pdt->render('my.view', compact('udt', 'pdt'));
}

फिर आप अपने दृष्टिकोण पर दोनों DT के लिए बिल्डर का उपयोग कर सकते हैं।

{!! $udt->html()->table() !!} // users table
{!! $pdt->html()->table() !!} // posts table

{!! $udt->scripts() !!} // users table scripts
{!! $pdt->scripts() !!} // posts table scripts

बस एक विचार है जिसे आप एक्सप्लोर करने का प्रयास कर सकते हैं। धन्यवाद!

yajra 20 जून 2017

👍2

धन्यवाद @yajra मैं कुछ बातें कोशिश करता हूँ

isometriq 22 जून 2017

इस सवाल के लिए धन्यवाद। मुझे यह काम करने के लिए मिला जैसा कि @yajra ने सुझाया था। जो लोग एक ही काम करने की कोशिश कर रहे हैं और इस पद पर उतरे हैं, उनके लिए व्यू फाइल होनी चाहिए:

{!! $udt->html()->table(['id' => 'udt']) !!} // users table
{!! $pdt->html()->table(['id' => 'pdt']) !!} // posts table

{!! $udt->html()->scripts() !!} // users table scripts
{!! $pdt->html()->scripts() !!} // posts table scripts

आपको प्रत्येक तालिका में एक अद्वितीय आईडी विशेषता को पारित करने की आवश्यकता है ताकि js ठीक से काम करें। आशा है कि यह किसी की मदद करो!

और आपके डेटाटेबल क्लास में, आपने html () विधि में अतिरिक्त परम में पास किया:

public function html() {

    return $this->builder()
        ->ajax(['data' => 'function(d) { d.table = "posts"; }'])
        ->parameters($this->getBuilderParameters());
}

@yajra , अच्छा होगा यदि https://datatables.yajrabox.com/services/two-datatables पर नवीनतम प्रलेखन के बजाय यह उदाहरण है।

benlwong 21 दिस॰ 2017

👍2

प्रतिक्रिया के लिए @benlwong धन्यवाद। डेमो सोर्स कोड यहां उपलब्ध

yajra 22 दिस॰ 2017

हाय सब, मैं इस पोस्ट पर समाधान का पालन किया और मैं एक ही समय में काम कर रहे मेरे दो datatables हासिल किया!
लेकिन .. मैं नहीं चाहता कि दोनों को एक ही समय में लोड किया जाए, जब सामान्य पृष्ठ लोड हो रहा हो।

मैं चाहता हूं कि जब मैं विशिष्ट टैब / बटन पर क्लिक करूं तो 2 डीटेटेबल को लोड कर सकूं।
मैंने उस पृष्ठ में देखा: https://datatables.yajrabox.com/services/two-datatables

function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {
        $('#postsTable').DataTable({
            dom: 'Bfrtip',
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            buttons: [
                'csv', 'excel', 'pdf', 'print', 'reset', 'reload'
            ],
            ajax: '/services/two-datatables/posts',
            columns: [
                {data: 'id', name: 'posts.id'},
                {data: 'title', name: 'posts.title'},
                {data: 'created_by', name: 'users.name', width: '110px'},
                {data: 'created_at', name: 'posts.created_at', width: '120px'},
                {data: 'updated_at', name: 'posts.updated_at', width: '120px'},
            ],
            order: [[0, 'desc']]
        });
    }
}

इसमें मूल रूप से डेटाटेबल के जेएस को लपेटते हुए एक इफ स्टेटमेंट जोड़ना होता है, लेकिन मैं डेटाटेबल सर्विस कार्यान्वयन के माध्यम से एक समाधान चाहता हूं, जैसे आप इस पोस्ट में कर रहे थे। कुछ इस तरह:

function postsDataTables() {
    if (!$.fn.dataTable.isDataTable('#postsTable')) {

        {!! $secondDataTable->html()->scripts() !!}

    }
}

लेकिन ऐसा नहीं किया जा सकता क्योंकि फ़ंक्शन "स्क्रिप्ट ()" टैग प्रिंट करता है