0

我正在制作一个表格,使用 jQuery 库(DataTables),并想添加按钮以将表格的结果导出到 Excel 文件,然后通过该页面的示例引导我,并将它们导出,但我现在页面加载时发送警报,我一直在互联网上阅读并说它管理修改脚本中的一些行和状态,但我无法修复它,当我打开页面时,它显示下一个错误:

DataTables 警告(表 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&oacute;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>

我希望你能帮助我。

4

3 回答 3

0

上一个答案是正确的,但是,如果要添加导出按钮,还需要 flash 路径。

sSwfPath: "/swf/copy_csv_xls_pdf.swf",
于 2014-06-25T19:51:17.633 回答
0

我认为您遇到的问题是 javascript 在加载数据之前触发。要解决此问题,请确保脚本位于正在填充的表下方。

于 2013-02-28T22:47:03.963 回答
0

您在同一页面上针对 #example 调用 dataTable 两次,这将引发“DataTables 警告(表 id = 'example'):无法重新初始化 DataTable”错误

于 2013-02-28T22:55:56.457 回答