Laravel-datatables: لا يمكن قراءة خاصية "النمط" غير المعرفة في صفوف التفاصيل

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

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

لدي صف تفاصيل مع جداول البيانات. يعمل صف التفاصيل بشكل صحيح ، ولكن عندما انتقل إلى الصفحة الأخرى ، يظهر الخطأ.

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

هنا بلدي HTML

<table id="dt_basic" class="table table-striped table-hover" width="100%">
<thead>
   <tr>
   <th></th>
    <th class="text-center">ID</th>
    <th class="text-center">Nama Bank</th>
    <th class="text-center">Nama Akun</th>
    <th class="text-center">No. Rekening</th>
    <th class="text-center">Actions</th>
    </tr>
</thead>
</table>

<script src="<?php echo ASSETS_URL; ?>/js/handlebars-v4.0.10.js"></script>
<script id="details-template" type="text/x-handlebars-template">
    <table class="table">
        <tr>
            <td>Detail Info :</td>
            <td>Tidak ada informasi tambahan </td>
        </tr>
    </table>
</script>

شبيبي

var template = Handlebars.compile($("#details-template").html());
$('#dt_basic').dataTable({
       processing: true,
       serverSide: true,
       ajax: 'datatables/dataBank',
       columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "searchable":     false,
                "data":           null,
                "defaultContent": ''
            },
            { data: 'id', name: 'id', orderable:true},
            { data: 'nama_bank', name: 'nama_bank', orderable:true },
            { data: 'nama_akun', name: 'nama_akun',orderable:true },
            { data: 'no_rek', name: 'no_rek',orderable:true },
            { data: 'action', name: 'action', 'searchable':false },
        ],
        "sDom": "<'dt-toolbar hidden-print'<'col-xs-12 col-sm-11'f><'col-sm-1 col-xs-12 hidden-xs'l>r>"+
          "t"+
          "<'dt-toolbar-footer hidden-print'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth" : true,
        "preDrawCallback" : function() {
          // Initialize the responsive datatables helper once.
          if (!responsiveHelper_dt_basic) {
            responsiveHelper_dt_basic = new ResponsiveDatatablesHelper($('#dt_basic'), breakpointDefinition);
          }
        },
        "rowCallback" : function(nRow) {
          responsiveHelper_dt_basic.createExpandIcon(nRow);
        },
        "drawCallback" : function(oSettings) {
          responsiveHelper_dt_basic.respond();
        },
        order: [[1, 'desc']],
        "lengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
        'iDisplayLength': 50,
    });
$('#dt_basic 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');
          }
      });

ملحوظة

إذا بقيت في صفحة واحدة وقمت بالوصول إلى جداول البيانات ، فكل شيء يعمل على ما يرام. ولكن عندما أذهب إلى الصفحة الأخرى ، يظهر هذا الخطأ

jquery.dataTables.min.js:62 Uncaught TypeError: Cannot read property 'style' of undefined
    at Ha (jquery.dataTables.min.js:62)
    at Z (jquery.dataTables.min.js:13)
    at t.<anonymous> (jquery.dataTables.min.js:126)
    at t.iterator (jquery.dataTables.min.js:100)
    at t.<anonymous> (jquery.dataTables.min.js:126)
    at Function.adjust (jquery.dataTables.min.js:103)
    at t.<anonymous> (jquery.dataTables.min.js:126)
    at t.visible (jquery.dataTables.min.js:103)
    at t.<anonymous> (jquery.dataTables.min.js:138)
    at t.iterator (jquery.dataTables.min.js:100)

عندما أحذف هذا

{
                "className":      'details-control',
                "orderable":      false,
                "searchable":     false,
                "data":           null,
                "defaultContent": ''
            },

لقد ذهب الخطأ ، لكن الجدول لا يحتوي على صف / صف تفاصيل تابع. الرجاء مساعدتي ارجاي
شكرا لبيانات البيانات الرائعة.

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

  • نظام التشغيل: Windows 10
  • إصدار PHP: 5 ++
  • إصدار Laravel: 5.4.2
  • إصدار Laravel-Datatables: 7.7.2
javascript question

التعليق الأكثر فائدة

عذرا على الرد المتأخر. في رأيي ، هذا مرتبط بالفعل بعدد الأعمدة. تأكد من أن لديك نفس الرقم <th> و <td> على html.

ال 10 كومينتر

هل تستخدم بعض ملحقات dataTable الأخرى مثل ترقيم الصفحات؟ أعتقد أنني واجهت هذا من قبل وقمت بإصلاحه عن طريق إزالة بعض الامتدادات.

أنا لا تستخدم ملحقات جداول البيانات الأخرى. أنا باستخدام نموذج SmartAdmin ، فهو يتضمن بالفعل جداول البيانات.
أزلت جميع جداول البيانات js في هذا القالب ، وباستخدام جداول بيانات yajra.

أقدم بعض الأمثلة. تحقق هنا من لقطة الشاشة الخاصة بي ، آمل أن تتمكن من مساعدتي في إصلاح هذا :)
754pelx2axul 1
هذه صفحة فارغة. لا يوجد شيء هنا...

k71k9vk2vgj3 2
هذه صفحة جداول البيانات. أول تحميل (أو أول تحميل من صفحة أخرى). يعمل جدول البيانات هذا بشكل مثالي.

zdhkg6mqy5x7
ثم سأذهب إلى الصفحة الأخرى. للتحقق السهل ، دعنا ننتقل إلى صفحة فارغة. ويظهر الخطأ. الصفحة الفارغة تتحول إلى صفحة جداول البيانات ، بدون بيانات.


           {
                "className":      'details-control',
                "orderable":      false,
                "searchable":     false,
                "data":           null,
                "defaultContent": ''
            },

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

هل عدد الأعمدة يتغير؟ أواجه نفس المشكلة ، ولكن يبدو أنها تحدث فقط عندما يتغير عدد الأعمدة. لسبب ما ، تحتفظ dataTables ببقايا عدد الأعمدة من التكرار السابق ، ولا تدمر الجدول السابق. لقد دمرت مجموعة على الحقيقة.

عذرا على الرد المتأخر. في رأيي ، هذا مرتبط بالفعل بعدد الأعمدة. تأكد من أن لديك نفس الرقم <th> و <td> على html.

كانت المشكلة بالنسبة لي هي أن بقايا الأعمدة معلقة ، لذلك كان علي تدمير تلك البقايا:

var myDataTable = $("#" + this.options.id).DataTable(myOptions);
myDataTable.destroy(true);
const tableNode = $("<table id='164154654'></table>")
$(someContainer).append(tableNode);

لقد قمت بحفظ عقدة الجدول ، ودمرتها تمامًا ، ثم أعدت إنشائها وهذا حل مشاكلي.

مشكلتي لا تزال موجودة. لذلك أعتقد أنني لن أستخدم هذه الميزة. الكالينجيون

شكرا للإستجابة.

تضمين التغريدة

ضع <th></th> في جدولك


واستخدام مثل هذا

تنسيق الوظيفة (د) {
// console.log (د) ؛
var data = "

"+
""+
" "+
" "+
" "+
" "+
" "+
" "+
" "+
// " "+
" "؛
$(d.fornecedores).each(function (key, value) {

    // $(value.pagamentos).each(function (key, value1) {
    //     console.log(value1.html);
    // });


    data += '<tr>' +
        '<td>' + value.nome + '</td>' +
        '<td>' + value.nome + '</td>' +
        '<td>' + value.nome + '</td>' +
        '<td>' + value.nome + '</td>' +
        '<td>' + value.nome + '</td>' +
        '<td>' + value.nome + '</td>' +
        '<td>' + value.nome + '</td>' +
        //'<td>' + value.emitido + '</td>' +
        '</tr>';
});
return data;

}

"

هوية شخصيةتاريخ البدءتم التحقق من صحتهاإجراءاتعنوانعامة Obsالمدفوعاتنشر

شكرا جورديت. أنا لا أستخدم جداول البيانات بعد الآن. أنا أقوم ببناء مكون الجدول الخاص بي باستخدام vuejs

شكرا لردك

مرحبًا ، لدي مشكلة في استخدام jquery datatable في الزاوية ، المشكلة هي أن كلا من واجهة برمجة التطبيقات (API) الخاصة بي ، ولكنهما يعملان بشكل صحيح لأول مرة وفي المرة الثانية يعرضان البيانات الصحيحة ولكن الفلتر والبحث سيعملان على البيانات السابقة فقط.
يمكن لأي شخص أن يساعد في حل هذه المشكلة.

استخدام الجداول

إذا كان ($ .fn.DataTable.isDataTable ('# mytable2'))
{
$ ('# mytable2'). DataTable (). destruction ()؛
}
$ ('# mytable2 tbody'). فارغ ()؛

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات