繁体   English   中英

数据表和表工具的警告警报

[英]Warning alert on datatables & tabletools

我正在使用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>

我希望你能帮助我。

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

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

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

sSwfPath: "/swf/copy_csv_xls_pdf.swf",

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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