我正在使用jQuery库(DataTables)创建一个表,并希望添加按钮以将表的结果导出到Excel文件,然后通过此页面的example引导我,以及让他们导出,但我现在在页面加载时发送警报,我一直在互联网上阅读并说它管理修改脚本中的一些行和状态,但我无法修复它,当我打开页面时,它showme下一个错误:
DataTables警告(table id ='example'):无法重新初始化DataTable。
要检索此表的DataTables对象,请不传递参数或 请参阅bRetrieve和bDestroy的文档
我通过下一个表单调用我的脚本: 的index.php
<meta charset="utf-8">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/funciones.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.js" type="text/javascript"></script>
<link href="css/cuerpo.css" rel="stylesheet" type="text/css" />
<!--Prueba-->
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/TableTools.css";
</style>
<script src="js/TableTools.js" type="text/javascript"></script>
<script src="js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
} );
</script>
<!--Prueba-->
</head>
<body id="dt_example">
<div id="container">
<div id="header">
</div>
<div id="intro">
<header id="titulo">
</header>
<div id="demo">
<article id="contenido"></article>
<br><br>
</div>
</div>
</body>
并调用JS页面:
$(document).ready(function(){
verlistado()
//se carga la lista de la consulta
})
function verlistado(){ //funcion para mostrar el listado en el index por jquery
var randomnumber=Math.random()*11;
$.post("Registro/lista_base.php", {
randomnumber:randomnumber
}, function(data){
$("#contenido").html(data);
});
}
after it use the jQuery library and print on a php data table:
$(document).ready(function(){
$('#example').dataTable( { //convertimos nuestro listado de la forma del jquery.datatables- pasamos el id de la tabla
"sPaginationType": "full_numbers" //damos formato a la paginacion(numeros)
} );
})
<!--Prueba-->
<style type="text/css" title="currentStyle">
@import "css/TableTools.css";
</style>
<script src="js/TableTools.js" type="text/javascript"></script>
<script src="js/ZeroClipboard.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip'
} );
} );
</script>
<!--Prueba-->
<script language="JavaScript" type="text/javascript">
function PopWindow(idUsuario)
{
window.open('Registro/detalle.php?id='+idUsuario,'Registo del alumno','width=420, height=350');
}
</script>
<script type="text/javascript" language="javascript" src="js/listado.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$('[rel=tooltip]').bind('mouseover', function()
{
if ($(this).hasClass('ajax'))
{
var ajax = $(this).attr('ajax');
$.get(ajax,
function(theMessage)
{
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');});
}
else{
var theMessage = $(this).attr('content');
$('<div class="tooltip">' + theMessage + '</div>').appendTo('body').fadeIn('fast');
}
$(this).bind('mousemove', function(e)
{
$('div.tooltip').css
({
'top': e.pageY - ($('div.tooltip').height() / 2) - 5,
'left': e.pageX + 15
});
});
}).bind('mouseout', function(){
$('div.tooltip').fadeOut('fast', function(){
$(this).remove();
});
});
});
</script>
<style>
.tooltip
{
position:absolute;
width:250px;
background-image:url(images/tip-bg.png);
background-position:left center;
background-repeat:no-repeat;
color:#FFF;
padding:5px 5px 5px 18px;
font: Verdana, Geneva, sans-serif;
font-size:12px;
}
li
{
margin-bottom:30px;
}
#wrapper
{
margin:0 auto;
width:500px;
margin-top: 99px;
}
</style>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Instituto</th>
<th>Categoria</th>
<th>Version</th>
<th width="20%">Nombre</th>
<th>Nacionalidad</th>
<th>email</th>
<th>Puntaje</th>
<th>Comprobante</th>
<th width='1%'>Detalles</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<?php
while($reg= mysql_fetch_array($listado))
{
echo '<tr>';
echo '<td><center>'.mb_convert_encoding($reg['razon_comercial'], "UTF-8").'</center></td>';
echo '<td><center>'.mb_convert_encoding($reg['categoria'], "UTF-8").'</center></td>';
echo '<td><center>'.mb_convert_encoding($reg['version'], "UTF-8").'</center></td>';
echo '<td>'.mb_convert_encoding($reg['Nombre'], "UTF-8").'</td>';
echo '<td><center>'.mb_convert_encoding($reg['nacionalidad'], "UTF-8").'</center></td>';
echo '<td>'.mb_convert_encoding($reg['email'], "UTF-8").'</td>';
echo '<td><center>'.mb_convert_encoding($reg['calificacion'], "UTF-8").'</center></td>';
echo "<td><center><a href='".mb_convert_encoding($reg['comprobante'], 'UTF-8')."'</a>descargar</center></td>";
echo "<td><a href=javascript:PopWindow(".mb_convert_encoding($reg['idAlumno'], 'UTF-8').") alt=Image Tooltip rel=tooltip content='
<div id=con><b>Nombre: </b>".mb_convert_encoding($reg['Nombre'], "UTF-8")."<br>
<b>Nacionalidad: </b>".mb_convert_encoding($reg['nacionalidad'], "UTF-8")."<br>
<b>Correo: </b>".mb_convert_encoding($reg['email'], "UTF-8")."<br>
<b>Instituto: </b>".mb_convert_encoding($reg['razon_comercial'], "UTF-8")."<br>
<b>Puntaje: </b>".mb_convert_encoding($reg['calificacion'], "UTF-8")."<br>
<b>Categoria: </b>".mb_convert_encoding($reg['categoria'], "UTF-8")."<br>
<b>Versión: </b>".mb_convert_encoding($reg['version'], "UTF-8")."</div>'><center><img src='images/detail.png' width='20%'></center></a><br></td>";
echo '</tr>';
}
?>
</tbody>
</table>
我希望你能帮助我。
答案 0 :(得分:0)
我认为您遇到的问题是在加载数据之前javascript正在触发。要解决此问题,请确保脚本位于正在填充的表下方。
答案 1 :(得分:0)
您在同一页面上针对#example调用了两次dataTable,这将抛出“DataTables警告(table id ='example'):无法重新初始化DataTable”错误
答案 2 :(得分:0)
以前的答案是正确的,但是,如果您想添加导出按钮,还需要闪存路径。
sSwfPath: "/swf/copy_csv_xls_pdf.swf",