vjk*_*vjk 53 html jquery datatables
我正在使用datatables示例并在加载页面时收到类似这样的错误:Datatables warning(table id ='example'):无法重新初始化数据表.要检索此表的DataTables对象,请不要传递任何参数或查看bRetrieve和bDestroy的文档.
我试图测试fnRowCallback
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DataTables live example</title>
<script type="text/javascript" charset="utf-8" src="DataTables/media/js/jquery.js"></script>
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script>
<style type="text/css">
@import "DataTables/media/css/demo_table.css";
</style>
</head>
<body id="dt_example">
<script>
$(document).ready(function() {
$('#example').dataTable();
} );
$(document).ready( function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );
</script>
<div id="container">
<h1>Live example</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
我在这做错了什么？
Rck*_*kLN 114
尝试添加"bDestroy":true到选项对象文字,例如
$('#dataTable').dataTable({
...
....
"bDestroy": true
});
资料来源:iodocs.com
或删除第一个:
$(document).ready(function() {
$('#example').dataTable();
} );
在你的情况下是最好的选择vjk.
小智 53
您还可以datatable在创建新代码之前使用以下代码销毁旧代码datatable:
$("#example").dataTable().fnDestroy();
Nic*_*tti 33
您正在初始化数据表两次,为什么？
// Take this off
/*
$(document).ready(function() {
$( '#example' ).dataTable();
} );
*/
$(document).ready( function() {
$( '#example' ).dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Bold the grade for all 'A' grade browsers
if ( aData[4] == "A" )
{
$('td:eq(4)', nRow).html( '<b>A</b>' );
}
}
} );
} );
Jav*_*ved 21
在您的dataTable中添加"bDestroy":true如下: -
$('#example').dataTable({
....
stateSave: true,
"bDestroy": true
});
它会工作.
Ken*_*lar 17
您可以添加destroy:true到配置中以确保在重新初始化之前删除已存在的数据表.
$('#example').dataTable({
destroy: true,
...
});
KIs*_* SP 11
在绑定 DataTable 之前，您必须通过以下操作销毁数据表并清空表体，
function Create() {
if ($.fn.DataTable.isDataTable('#dataTable')) {
$('#dataTable').DataTable().destroy();
}
$('#dataTable tbody').empty();
//Here call the Datatable Bind function;}
如果我们多次初始化dataTable会发生此问题.然后我们必须删除以前的.
另一方面,我们也可以在创建新数据表之前以这种方式销毁旧数据表,使用以下代码:
$(“#example”).dataTable().fnDestroy();
还有另一个场景,比如说你发送了多个ajax请求,哪个响应会在同一个模板中访问同一个表,然后我们也会得到错误.在这种情况下,fnDestroy方法无法正常工作,因为你不知道哪个响应是第一个然后.然后你必须设置bRetrieve TRUE数据表配置.就是这样.
这是我的senario:
<script type="text/javascript">
$(document).ready(function () {
$('#DatatableNone').dataTable({
"bDestroy": true
}).fnDestroy();
$('#DatatableOne').dataTable({
"aoColumnDefs": [{
"bSortable": false,
"aTargets": ["sorting_disabled"]
}],
"bDestroy": true
}).fnDestroy();
});
</script>
小智 7
$('#example').dataTable();
使它成为一个类,这样您就可以一次实例化多个表
$('.example').dataTable();
小智 6
https://datatables.net/reference/option/retrieve
$('#example').dataTable({
retrieve: true,
...
});