У меня есть строка деталей с таблицами данных. Строка с подробностями работает правильно, но когда я перехожу на другую страницу, появляется ошибка.
Вот мой 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": ''
},
ошибка исчезла, но в моей таблице нет дочерней строки / строки сведений. Пожалуйста, помогите мне, Арджай
Спасибо за замечательные данные.
Используете ли вы какие-либо другие расширения dataTable, например разбиение на страницы? Я думаю, что сталкивался с этим раньше и исправил это, удалив некоторые расширения.
Я не использую другие расширения таблиц данных. Я использую шаблон SmartAdmin, он уже включает данные.
Я удаляю все данные js в этом шаблоне и использую данные yajra.
Приведу пример. Вот мой скриншот, надеюсь, вы поможете мне это исправить :)
Это пустая страница. Здесь ничего нет ...
Это страница с данными. Первая загрузка (или первая загрузка с другой страницы). Эти данные работают отлично.
Затем я перейду на другую страницу. Для упрощения проверки перейдем на пустую страницу. И ошибка показывает. Пустая страница превращается в страницу с данными без данных.
{
"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 = "
Я БЫ | "+Дата начала | "+Подтверждено | "+Процедуры | "+адрес | "+Общие наблюдения | "+Платежи | "+Выпущен | "+
спасибо @gordett. Я больше не использую таблицы данных. Я создаю свой собственный компонент таблицы с помощью vuejs
Спасибо за ответ
Привет, у меня проблема с использованием jquery datatable в angular. Проблема в том, что мой th и td оба из API, но он работает правильно в первый раз и второй раз показывает правильные данные, но фильтр и поиск будут работать только для предыдущих данных.
Кто угодно может помочь решить эту проблему.
использовать tabledestroy
если ($ .fn.DataTable.isDataTable ('# mytable2'))
{
$ ('# mytable2'). Таблица данных (). уничтожить ();
}
$ ('# mytable2 tbody'). пустой ();
Самый полезный комментарий
Простите за поздний ответ. На мой взгляд, это действительно связано с количеством столбцов. Убедитесь, что у вас одинаковое количество
<th>
и<td>
в вашем html.