dataTable无法在多个选项卡上运行

时间:2018-04-09 17:31:47

标签: jquery datatables

我的dataTable只能在最新的标签页面中使用。当我选择另一个时,dataTable就不会加载。

顺便说一下,在所有表格上加载dataTables需要帮助,即使我在表格中切换,它们也总是保持相同的ID,所以这可能就是问题所在。

正在从我的数据库中抓取所有条目。

我正在这里发布代码。谢谢。

PHP / HTML:

        $rs = $conexion->Consultas($sql);
        if( $rs )
        {
            if ( pg_num_rows($rs) > 0 )
            {
                echo " <table class='table' id='tablaboletas'>";
                echo "<thead>";
                echo "<tr>";
                echo "<th style='text-align:center; vertical-align: middle;'>N° Boleta</th>";
                echo "<th style='vertical-align: middle;'>Infractor</th>";
                echo "<th style='vertical-align: middle;'>Funcionario</th>";
                echo "<th style='text-align:center; vertical-align: middle;'>Placa <small>(Vehículo)</small></th>";
                echo "<th style='text-align:center; vertical-align: middle;'>Registro <small>(Fecha)</small></th>";
                echo "<th style='text-align:center; vertical-align: middle;'>Vencimiento <small>(Fecha)</small></th>";
                echo "<th style='text-align:center; vertical-align: middle;'>Estado de Boleta</th>";
                echo "<th style='text-align:center; vertical-align: middle;'><small>Activ. / Desac.</small></th>";
                echo "</tr>";
                echo "</thead>";
                echo "<tbody>";
                while( $obj = pg_fetch_object($rs) ){
                    switch ($i) {
                        case 0: echo "<tr>";
                                break;
                        case 1: echo "<tr class='success'>";
                                break;
                        case 2: echo "<tr class='danger'>";
                                break;
                        case 3: echo "<tr class='info'>";
                                break;
                        case 4: echo "<tr class='warning'>";
                                break;
                        case 5: echo "<tr class='active'>";
                                break;
                     }
                   echo "<td>";
                   echo "<input type='checkbox' value='".$obj->id_boleta."' name='idCheck' > ";
                   echo "<a href='#' onclick=ventana('./FrmBoletaDetalle.php','".$obj->id_boleta."'); return false;><font size='2'>";
                   echo "".completarCerosCodigo($obj->id_boleta);
                   echo "</font><a> ";
                   if ($obj->es_movil == "true" || $obj->es_movil == "t" ){
                    echo "<img src='../../Imagenes/Movil2.png' border='0' width='15' height='20'>";
                   }
                   echo "</td>";
                   echo "<td>".utf8_decode($obj->nombres)." ".utf8_decode($obj->apellidos)."</td>";
                   echo "<td>".utf8_decode($obj->nombre)." ".utf8_decode($obj->apellido)."</td>";
                   echo "<td style='text-align:center;'>".$obj->placa."</td>";
                   echo "<td style='text-align:center;'>".date('d-m-Y',strtotime($obj->fec_registro))."</td>";
                   echo "<td style='text-align:center;'>".date('d-m-Y',strtotime($obj->fec_vencimiento))."</td>";
                   echo "<td style='text-align:center;'>".$obj->descripcion."</td>";      
                   echo "<td style='text-align: center; vertical-align: middle;'>";
                    echo "<input id='checkActivo' name='checkActivo[]'  type='checkbox' value='.$obj->id_boleta.'";
                    if ($obj->status == "t") {
                      echo "checked='checked'";
                    } 
                   echo " onclick=accionStatus('$obj->id_boleta','$obj->status');>";
                   echo "</td>";  
                   echo "</tr>";
                   $i++;
                   if ($i > 5){
                    $i=0;
                   }
                }
                echo "</tbody>";
                echo "</table>";
            } else
                echo "<br><p>No se encontraron coincidencias en este período</p>";
        } else $ok = false;

        return $ok;
    } 
?>

标签的PHP / HTML:

echo "<div class='tab-content'>";
                while( $obj = pg_fetch_object($rs) ){
                    if ($vesprimeravez){
                        echo "<div id='home' class='tab-pane fade in active'>";
                        mostrarListado($conexion,$obj->periodo,$vidusuario,$vparametro1,$vparametro2,$vparametro3,$vparametro4);
                        echo "</div>";
                        $vesprimeravez = false;
                    } else {
                        echo "<div id='menu".$vi."' class='tab-pane fade'>";
                        mostrarListado($conexion,$obj->periodo,$vidusuario,$vparametro1,$vparametro2,$vparametro3,$vparametro4);
                        echo "</div>";
                    }
                    $vi++;
                }

JS:

<script>

    $(document).ready(function(){
        $('#tablaboletas').dataTable();
    });


</script>

1 个答案:

答案 0 :(得分:0)

解决了!只需要更改选择器项@ jQuery ...而不是使用'id',我已经使用了元素选择器。

JS:

<script>
    $(document).ready(function(){
        $('table').dataTable();
    });
</script>