Laravel-datatables: Невозможно прочитать свойство 'style' неопределенного в строках сведений

Созданный на 12 июн. 2017  ·  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>

Мой JS

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
  • Версия Laravel-Datatables: 7.7
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": ''
            },

Если я удалю это, evertyhing будет работать нормально, но в таблицах данных нет строки с подробностями. Пожалуйста, помогите мне, Арджай, заранее спасибо.
я не знаю, как это исправить. Спасибо за твой ответ, Арджай.

Количество столбцов меняется? У меня такая же проблема, но похоже, что она возникает только при изменении количества столбцов. По какой-то причине dataTables хранит остатки числа столбцов от предыдущей итерации, а не уничтожает предыдущую таблицу. У меня действительно есть destroy, установленный на true.

Простите за поздний ответ. На мой взгляд, это действительно связано с количеством столбцов. Убедитесь, что у вас одинаковое количество <th> и <td> в вашем html.

Для меня проблема заключалась в том, что остатки колонн торчали повсюду, поэтому мне пришлось уничтожить эти остатки:

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

Я сохранил узел таблицы, полностью уничтожил его, затем воссоздал, и это устранило мои проблемы.

моя проблема все еще существует. поэтому я думаю, что не собираюсь использовать эту функцию. хе-хе

Спасибо за ответ.

@nusendra

поместите <th></th> в свою таблицу


и использовать вот так

`function format (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;

}

`

Я БЫДата началаПодтвержденоПроцедурыадресОбщие наблюденияПлатежиВыпущен

спасибо @gordett. Я больше не использую таблицы данных. Я создаю свой собственный компонент таблицы с помощью vuejs

Спасибо за ответ

Привет, у меня проблема с использованием jquery datatable в angular. Проблема в том, что мой th и td оба из API, но он работает правильно в первый раз и второй раз показывает правильные данные, но фильтр и поиск будут работать только для предыдущих данных.
Кто угодно может помочь решить эту проблему.

использовать tabledestroy

если ($ .fn.DataTable.isDataTable ('# mytable2'))
{
$ ('# mytable2'). Таблица данных (). уничтожить ();
}
$ ('# mytable2 tbody'). пустой ();

Была ли эта страница полезной?
0 / 5 - 0 рейтинги