لدي صف تفاصيل مع جداول البيانات. يعمل صف التفاصيل بشكل صحيح ، ولكن عندما انتقل إلى الصفحة الأخرى ، يظهر الخطأ.
هنا بلدي 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": ''
},
لقد ذهب الخطأ ، لكن الجدول لا يحتوي على صف / صف تفاصيل تابع. الرجاء مساعدتي ارجاي
شكرا لبيانات البيانات الرائعة.
هل تستخدم بعض ملحقات dataTable الأخرى مثل ترقيم الصفحات؟ أعتقد أنني واجهت هذا من قبل وقمت بإصلاحه عن طريق إزالة بعض الامتدادات.
أنا لا تستخدم ملحقات جداول البيانات الأخرى. أنا باستخدام نموذج SmartAdmin ، فهو يتضمن بالفعل جداول البيانات.
أزلت جميع جداول البيانات js في هذا القالب ، وباستخدام جداول بيانات yajra.
أقدم بعض الأمثلة. تحقق هنا من لقطة الشاشة الخاصة بي ، آمل أن تتمكن من مساعدتي في إصلاح هذا :)
هذه صفحة فارغة. لا يوجد شيء هنا...
هذه صفحة جداول البيانات. أول تحميل (أو أول تحميل من صفحة أخرى). يعمل جدول البيانات هذا بشكل مثالي.
ثم سأذهب إلى الصفحة الأخرى. للتحقق السهل ، دعنا ننتقل إلى صفحة فارغة. ويظهر الخطأ. الصفحة الفارغة تتحول إلى صفحة جداول البيانات ، بدون بيانات.
{
"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 = "
هوية شخصية | "+تاريخ البدء | "+تم التحقق من صحتها | "+إجراءات | "+عنوان | "+عامة Obs | "+المدفوعات | "+نشر | "+
شكرا جورديت. أنا لا أستخدم جداول البيانات بعد الآن. أنا أقوم ببناء مكون الجدول الخاص بي باستخدام vuejs
شكرا لردك
مرحبًا ، لدي مشكلة في استخدام jquery datatable في الزاوية ، المشكلة هي أن كلا من واجهة برمجة التطبيقات (API) الخاصة بي ، ولكنهما يعملان بشكل صحيح لأول مرة وفي المرة الثانية يعرضان البيانات الصحيحة ولكن الفلتر والبحث سيعملان على البيانات السابقة فقط.
يمكن لأي شخص أن يساعد في حل هذه المشكلة.
استخدام الجداول
إذا كان ($ .fn.DataTable.isDataTable ('# mytable2'))
{
$ ('# mytable2'). DataTable (). destruction ()؛
}
$ ('# mytable2 tbody'). فارغ ()؛
التعليق الأكثر فائدة
عذرا على الرد المتأخر. في رأيي ، هذا مرتبط بالفعل بعدد الأعمدة. تأكد من أن لديك نفس الرقم
<th>
و<td>
على html.