Laravel-datatables: Tak dapat membaca 'gaya' properti yang tidak ditentukan pada Baris Detail

Dibuat pada 12 Jun 2017  ·  10Komentar  ·  Sumber: yajra/laravel-datatables

Ringkasan masalah atau permintaan fitur

Saya memiliki baris detail dengan datatables. Baris detail berfungsi dengan baik, tetapi ketika saya pergi ke halaman lain kesalahan muncul.

Potongan kode masalah

Ini HTML saya

<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>

JS saya

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

Catatan

Jika saya tetap di satu halaman dan mengakses datatables, semuanya berfungsi dengan baik. Tetapi ketika saya pergi ke halaman lain, kesalahan ini muncul

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)

Saat saya menghapus ini

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

kesalahan telah hilang, tetapi tabel saya tidak memiliki baris anak baris / detail. Tolong bantu saya Arjay
Terima kasih atas data yang luar biasa.

Detail sistem

  • Sistem Operasi: Windows 10
  • Versi PHP: 5 ++
  • Versi Laravel: 5.4.0
  • Laravel-Datatables Versi: 7.7.0
javascript question

Komentar yang paling membantu

Maaf atas tanggapan yang terlambat. Menurut saya, ini memang terkait dengan jumlah kolomnya. Pastikan Anda memiliki jumlah <th> dan <td> pada html Anda.

Semua 10 komentar

Apakah Anda menggunakan beberapa ekstensi lain dari dataTable seperti pagination? Saya rasa saya mengalami ini sebelumnya dan memperbaikinya dengan menghapus beberapa ekstensi.

im tidak menggunakan ekstensi datatables lain. Saya menggunakan template SmartAdmin, itu sudah termasuk datatables.
Saya menghapus semua js datatables di template ini, dan menggunakan yajra datatables.

Saya membuat beberapa contoh. Di sini periksa tangkapan layar saya, harap Anda dapat membantu saya memperbaiki ini :)
754pelx2axul 1
Ini adalah halaman kosong. Tidak ada apa-apa di sini ...

k71k9vk2vgj3 2
Ini adalah halaman datatables. Pemuatan pertama (atau pemuatan pertama dari halaman lain). Tabel data ini bekerja dengan sempurna.

zdhkg6mqy5x7
Lalu saya pergi ke halaman lain. Untuk pemeriksaan mudah, mari kita pergi ke halaman kosong. Dan kesalahannya terlihat. Halaman kosong berubah menjadi halaman datatables, tanpa data.


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

Jika saya menghapus ini, evertyhing berfungsi dengan baik, tetapi tabel data tidak memiliki baris detail. Tolong bantu saya arjay, terima kasih sebelumnya.
saya tidak tahu bagaimana cara memperbaikinya. Terima kasih atas jawaban Anda arjay.

Apakah jumlah kolom berubah? Saya mengalami masalah yang sama, tetapi sepertinya itu hanya terjadi ketika jumlah kolom berubah. Untuk beberapa alasan, dataTables menyimpan sisa-sisa jumlah kolom dari iterasi sebelumnya, dan tidak merusak tabel sebelumnya. Saya telah menghancurkan set ke true.

Maaf atas tanggapan yang terlambat. Menurut saya, ini memang terkait dengan jumlah kolomnya. Pastikan Anda memiliki jumlah <th> dan <td> pada html Anda.

Masalahnya bagi saya adalah sisa-sisa kolom berkeliaran, jadi saya harus menghancurkan sisa-sisa itu:

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

Saya menyimpan node tabel, menghancurkannya sepenuhnya, lalu membuatnya kembali dan itu menyelesaikan masalah saya.

masalah saya masih ada. jadi saya pikir saya tidak akan menggunakan fitur ini. hehe

Terima kasih atas tanggapannya.

@usendra.a

letakkan <th></th> di meja Anda


dan gunakan seperti ini

`format fungsi (d) {
// console.log (d);
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;

}

`

IndoMulai tanggalDivalidasiProseduralamatObs UmumPembayaranDikabarkan

terima kasih @gordett. im tidak menggunakan datatables lagi. Saya membangun komponen tabel saya sendiri dengan vuejs

terima kasih untuk balasan Anda

Hai, Saya memiliki masalah menggunakan jquery datatable in angular. Masalahnya adalah th dan td saya keduanya dari API tetapi berfungsi dengan baik untuk pertama kalinya dan kedua kalinya menunjukkan data yang benar tetapi filter dan pencarian hanya akan berfungsi untuk data sebelumnya.
Siapapun dapat membantu memecahkan masalah ini.

gunakan tabledestroy

if ($ .fn.DataTable.isDataTable ('# mytable2'))
{
$ ('# mytable2'). DataTable (). destroy ();
}
$ ('# mytable2 tbody']. empty ();

Apakah halaman ini membantu?
0 / 5 - 0 peringkat