我有一个详细的数据表行。 详细信息行工作正常,但是当我转到另一页时出现错误。
这是我的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": ''
},
错误消失了,但是我的表没有子行/明细行。 请帮我Arjay
感谢精彩的数据表。
您是否正在使用dataTable的其他扩展,例如分页? 我想我以前曾遇到过此问题,并通过删除一些扩展程序对其进行了修复。
即时通讯不使用其他数据表扩展。 我正在使用SmartAdmin模板,它已经包含数据表。
我删除了此模板中的所有datatables js,并使用yajra datatables。
我举个例子。 在这里查看我的屏幕截图,希望您能帮我解决这个问题:)
这是空白页。 这里什么都没有...
这是数据表页面。 首次加载(或其他页面的首次加载)。 该数据表完美运行。
然后,我将转到另一页。 为了便于检查,让我们转到空白页。 错误显示。 空白页变成没有数据的datatables页。
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
如果我删除它,一切正常,但数据表中没有明细行。 请帮助我,谢谢。
我不知道该如何解决。 感谢您的答复。
列数是否在变化? 我遇到了同样的问题,但似乎只有在列数更改时才会发生。 出于某种原因,dataTables保留了前一次迭代中的列数残留,而不破坏前一个表。 我确实将销毁设置为true。
抱歉迟了回应。 我认为,这确实与列数有关。 确保您的html上的<th>
和<td>
数目相同。
对我来说,问题在于圆柱的残留物四处徘徊,因此我不得不销毁这些残留物:
var myDataTable = $("#" + this.options.id).DataTable(myOptions);
myDataTable.destroy(true);
const tableNode = $("<table id='164154654'></table>")
$(someContainer).append(tableNode);
我保存了表节点,将其完全销毁,然后重新创建它,从而解决了我的问题。
我的问题仍然存在。 所以我认为我不会使用此功能。 呵呵
感谢您的回复。
@nusendra
将<th></th>
放在表中
像这样使用
`函数格式(d){
// console.log(d);
var data =“
ID | “ +开始日期 | “ +已验证 | “ +程序 | “ +地址 | “ +普通将军 | “ +付款方式 | “ +发布 | “ +
谢谢@gordett。 即时通讯不再使用数据表。 我用vuejs构建自己的表组件
感谢您的回复
嗨,我有一个问题是在angular中使用jquery数据表。问题是我的th和td都来自API,但第一次和第二次都能正常工作,它显示了正确的数据,但过滤器和搜索仅适用于以前的数据。
任何人都可以帮助解决此问题。
使用tabledestroy
如果($ .fn.DataTable.isDataTable('#mytable2'))
{
$('#mytable2')。DataTable()。destroy();
}
$('#mytable2 tbody')。empty();
最有用的评论
抱歉迟了回应。 我认为,这确实与列数有关。 确保您的html上的
<th>
和<td>
数目相同。