Laravel-datatables: كيفية عرض 2 datatable في صفحة واحدة علامات تبويب مختلفة

تم إنشاؤها على ١٢ يونيو ٢٠١٧  ·  9تعليقات  ·  مصدر: yajra/laravel-datatables

ملخص المشكلة أو طلب الميزة


مرحبا يوم سعيد لك.
أريد أن أطلب شيئًا ما وأحتاج إلى مساعدتك ، لقد قمت بإنشاء صفحة بها علامتا تبويب ، علامة التبويب # تعرض البيانات يوميًا ، علامة التبويب # 2 تعرض البيانات في الساعة ، أحاول إنشاء نفس الجدول في علامتي التبويب هاتين ، ولكن هذا فقط تظهر في علامة التبويب رقم واحد ، في علامة التبويب # اثنان فقط تظهر اسم العمود ، لماذا يحدث هذا؟

مقتطف رمز المشكلة

كنت أظن أن الشيء الخطأ موجود في وحدة التحكم الخاصة بي ، هذا هو الكود:

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>

تفاصيل النظام

الرجاء تضمين هذه التفاصيل حول نظامك! إذا تم حذفها ، سيتم إلغاء الأولوية للتذكرة على طلبات / تذاكر المستخدمين الآخرين.
  • نظام التشغيل: أوبونتو 16.04
  • إصدار PHP: 7
  • إصدار Laravel: 5.2.2
  • إصدار Laravel-Datatables: 6.0.1
question
مصدر
picture 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')
        );
    }

كن حذرًا أيضًا مع ajax المصغر ، أضف بيانات ajax بعد استدعاء هذه الطريقة.

picture mgralikowski في ٣ ديسمبر ٢٠٢٠
🎉1 👍1

ال 9 كومينتر

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

isometriq picture isometriq في ١٨ يونيو ٢٠١٧

ومع ذلك ، لا أحب كثيرًا استخدام النهج القائم على الخدمة لجدول ثم مختلفًا عن آخر. من أجل الاتساق ، أود أن أعرف كيفية الفصل أكثر .. هل من الممكن إنشاء مثل هذا الهيكل ؟:

UsersDatatableController
يعتني حصريًا بجدول البيانات للمستخدمين
العرض هو فقط لتقديم جدول البيانات والتعامل مع طلب أياكس

PostsDatatableController
يعتني حصريًا بجدول البيانات للمشاركات (عامة أو متعلقة بالمستخدمين)
العرض هو فقط لتقديم جدول البيانات والتعامل مع طلب أياكس

UsersController
استفد من UsersDatatableController و PostsDatatableController لتقديمها ووضعها في نفس طريقة العرض ، في علامات تبويب ، أو أكثر من ذلك ، أو أيًا كان .. لن تتم معالجة مكالمات ajax الخاصة بجداول البيانات بواسطة وحدة التحكم هذه. يمكن أن يكون تصور وحدة التحكم هذه أيضًا لنموذج تحرير بدلاً من صفحة عادية ، مع جدول بيانات بداخلها.

نظرًا لأن حالة الاستخدام الخاصة بي هي لتقديم جدول بيانات على جانب الخادم ، وأتطلع إلى الدمج مع
https://github.com/imanghafoori1/laravel-widgetize
وهذا
https://stackoverflow.com/questions/41857905/using-laravel-controllers-as-components-to-build-a-view

yajra
Lemme اعرف افكارك شكرا

isometriq picture isometriq في ١٨ يونيو ٢٠١٧

isometriq atm ، أعتقد أنه لا يمكنك استخدام صنفين من 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 picture yajra في ٢٠ يونيو ٢٠١٧
👍2

شكرا yajra سأحاول شيئين

isometriq picture isometriq في ٢٢ يونيو ٢٠١٧

شكرا على هذا السؤال. لقد حصلت للتو على هذا للعمل كما اقترح 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 بشكل صحيح. أتمنى أن يساعد هذا شخص ما!

وفي صنف DataTable ، قمت بتمرير المعلمة الإضافية في طريقة 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 picture benlwong في ٢١ ديسمبر ٢٠١٧
👍2

benlwong شكرا على ردود الفعل. كود المصدر التجريبي متاح هنا . إذا كنت تستطيع ، من فضلك لا تتردد في تقديم PR. شكر!

yajra picture yajra في ٢٢ ديسمبر ٢٠١٧

مرحباً بالجميع ، لقد اتبعت الحل في هذا المنشور وحققت جدولي بياناتي يعملان في نفس الوقت!
لكن .. لا أريد أن يتم تحميلهما معًا في نفس الوقت ، عندما يتم تحميل الصفحة العامة.

أريد أن يتم تحميل جدول البيانات الثاني عندما أنقر فوق علامة تبويب / زر معين.
رأيت ذلك في الصفحة: 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']]
        });
    }
}

يتكون هذا بشكل أساسي من إضافة عبارة if التي تغلف JS لجدول البيانات ، لكنني أريد حلاً من خلال تنفيذ DataTable Service ، كما كنت تفعل في هذا المنشور. شيء من هذا القبيل:

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

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

    }
}

لكن لا يمكن القيام بذلك لأن الوظيفة "scripts ()" تطبع العلامات

القضايا ذات الصلة

ghost picture ghost  ·  3تعليقات
jgatringer picture jgatringer  ·  3تعليقات
hari-web picture hari-web  ·  3تعليقات
SGarridoDev picture SGarridoDev  ·  3تعليقات
Abdulhmid picture Abdulhmid  ·  3تعليقات