简体   繁体   中英

Warning alert on datatables & tabletools

I'm making a table, using the jQuery library (DataTables), and wanted to add buttons to export the results of the table to an Excel file, then lead me by the example that this page, and get them exported, but I now send an alert when the page loads, I've been reading on the internet and say it manages modifying some lines and states within the scripts, but I could not fix it,when i open the page, it showme the next error:

DataTables warning (table id = 'example'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

I call my scripts by the next form: 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>

and it call a JS page:

$(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>

I hope you can help me.

I think the problem you're having is that the javascript is firing before the data is loaded. To get around this make sure the script is located BELOW the table that is being populated.

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

先前的答案是正确的,但是,如果要添加导出按钮,则还需要刷新路径。

sSwfPath: "/swf/copy_csv_xls_pdf.swf",

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM