1

Inconveniente con buena visualización de datos en tabla (Javascript-Html y Php) Tengo el siguiente código:

Artista.php:

<?php
 
 header('Content-Type: text/html; charset=UTF-8');
  require_once("connect/conexion.php");
  $sql="Select Distinct Artista From discos ORDER BY Artista ASC";
  $res1=$con->prepare($sql);
  $res1->execute();
  $result = $res1->get_result();
  $rows = $result->num_rows;
?>
<!Doctype html>
 <html lang="es">
  <center> 
     <head>
     
     <meta name="viewport" content="width=device-width, initial-scale=1.0 "> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Listado de discos organizados por artista </title>
      <script type="text/javascript" src="js/Artista.js"></script>
     <link rel="stylesheet" href="estilos.css"> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      
      <style type="text/css">
      table{
          border:1px solid;
          border-collapse:collapse;
          padding: 10px;
          }
         th, td, tr, th{
            padding: 5px 10px; 
            border: 1px solid; 
         }
         th{
             text-align:center;   
         }
      </style> 
     </head> 
         <div align="right" class="container">  
        <a href="http://clasicotk.epizy.com" target="_self">Volver al menú principal</a>
       

         </div>
         <div align="Center"> 
           <b><h3>Búsqueda por Artistas</h3></b>
         </div>
            <p> </p>  
        <body bgcolor="D5DBDB">  <!--D5DBDB es el color gris -->
             <div class="container">  <!--30 junio 2022 -->
         Seleccione Artista:
         <select id="Artista" onchange="seleccioneArtista()"> 
            
          <?php 
            
              while ($rows = $result->fetch_assoc()) {
               printf("<option value=\"%s\">%s</option>",$rows['Artista'],$rows['Artista']); 
              }
            ?>
         </select>

      
         <br></br>
         
        <div id="encabezado2">
      
         <table  class="table" style="width: 100%;">   
           
             <thead >  
         
             <tr bgcolor="#85C1E9">    
               <th style="width: 8%">Iddisco</th>
               <th style="width: 10%">Artista</th>
               <th style="width: 10%">Trabajo</th>
               <th style="width: 10%">Género</th>
               <th style="width: 10%">Año</th>
               <th style="width: 20%">Enlace</th>
             </tr>
            
             <tbody id="ans"> 
               </thead>
             </tbody>
               </div> 
             </div> 
             </body>
            
         </table>
        
       <script type="text/javascript">
         document.getElementById('encabezado2').style.display ='none';  
       </script> 
        </body> 
   </center>    
  </html> 

Además tengo el siguiente código llamado showArtista.Php:

<html lang="es">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>
  
<script type="text/javascript">
         document.getElementById('encabezado2').style.display ='block';  /*2 Oct 2022*/
   </script> 
  
<?php 
header('Content-Type: text/html; charset=UTF-8');
ini_set('display_errors', '1'); ini_set('display_startup_errors', '1'); error_reporting(E_ALL); 
$k=trim($_POST['id']) ?? null;
$link = mysqli_connect("sql209.epizy.com", "epiz_31078268", "nps6dB2pQWm");

mysqli_select_db($link, "epiz_31078268_clasicoTK");
$tildes = $link->query("SET NAMES 'utf8'"); 
$result = mysqli_query($link, "SELECT * FROM discos WHERE Artista='$k'");

 
while ($extraido = $result->fetch_assoc()) { //puesto 15 marzo 22 inicio while          

$Iddisco=$extraido['Iddisco'];
$Artista=$extraido['Artista'];
$Trabajo=$extraido['Trabajo'];
$Genero=$extraido['Genero'];
$Año=$extraido['Año'];
$Enlace=$extraido['Enlace'];
 
print("<tr>");

printf("<td style='text-align:center; vertical-align:middle'>%s</td>",$Iddisco);    
printf("<td style='text-align:center; vertical-align:middle'>%s</td>",$Artista);
printf("<td style='text-align:center; vertical-align:middle'>%s</td>",$Trabajo);
printf("<td style='text-align:center; vertical-align:middle'>%s</td>",$Genero);
printf("<td style='text-align:center; vertical-align:middle'>%s</td>",$Año);
printf('<td><a href="%1$s" target="_blank">%1$s</a></td>',$Enlace);  
print("</tr>");  

}  

mysqli_free_result($result);

mysqli_close($link);

 
  ?>
  
</body>

</html>

Tengo el siguiente código Artista.js:

function seleccioneArtista(){
 
 var x = document.getElementById("Artista").value;

 $.ajax({
  url:"showArtista.php",
 
  method: "POST",
   data:{
       id : x
   },
   success:function(data){
       console.log(data);
       $("#ans").html(data);

   }

})

}

Al ejecutar el código me muestra lo siguiente:

Es decir entrando a la pagina siguiente: http://clasicotk.epizy.com/Artista.php introducir la descripción de la imagen aquí

Debería de mostrármela bien es decir la información bien distribuida dentro de la tabla, como en las otras búsquedas como por ejemplo “Búsqueda por género”:

introducir la descripción de la imagen aquí

La razón por la cual se esta haciendo la que tiene como nombre Artista.php, es que esta debe de ocultar los encabezados de las tablas y no mostrarlos automáticamente COMO sucede con la búsqueda por género musical.

Muchas gracias por la ayuda

0

1 respuesta 1

2

Tienes varios errores de marcado en HTML:

     <table  class="table" style="width: 100%;">   
       
         <thead >  
     
         <tr bgcolor="#85C1E9">    
           <th style="width: 8%">Iddisco</th>
           <th style="width: 10%">Artista</th>
           <th style="width: 10%">Trabajo</th>
           <th style="width: 10%">Género</th>
           <th style="width: 10%">Año</th>
           <th style="width: 20%">Enlace</th>
         </tr>
        
         <tbody id="ans"> 
           </thead> <!-- Esto debería ir una línea arriba -->
         </tbody>
           <!-- Quita las siguientes 3 líneas -->
           </div> 
         </div> 
         </body> <!-- Especialmente esta, porque marca el fin del cuerpo -->
     </table>

Luego, en showArtista.php estás enviando encabezados HTML que no deberían estar ahí cuando la petición es por AJAX y el resultado reemplaza el cuerpo de la tabla.

Al ejecutar la petición, en consola se muestra lo siguiente:

<html lang="es">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
         document.getElementById('encabezado2').style.display ='block';  /*4 Oct 2022*/
   </script>
</head>

<body>
  
<tr><td style='text-align:center; vertical-align:middle'>14</td><td style='text-align:center; vertical-align:middle'>Boleros</td><td style='text-align:center; vertical-align:middle'>Homenaje Mercados Romi 1</td><td style='text-align:center; vertical-align:middle'>Boleros</td><td style='text-align:center; vertical-align:middle'>1992</td><td><a href="https://www.youtube.com/watch?v=Om0K32lZefI" target="_blank">https://www.youtube.com/watch?v=Om0K32lZefI</a></td></tr>  
</body>

</html>

El navegador "no sabe" cómo interpretar ese código para ponerlo como cuerpo de tabla y por eso es que no se ve correctamente. Se debe corregir eliminando todo lo que está antes de <?php y después de ?> en showArtista.php

Edición: Verifica que estás abriendo y cerrando todas las etiquetas donde corresponde y que dentro de la tabla no haya cosas que no corresponden:

     <table  class="table" style="width: 100%;">   
       <thead >  
         <tr bgcolor="#85C1E9">    
           <th style="width: 8%">Iddisco</th>
           <th style="width: 10%">Artista</th>
           <th style="width: 10%">Trabajo</th>
           <th style="width: 10%">Género</th>
           <th style="width: 10%">Año</th>
           <th style="width: 20%">Enlace</th>
         </tr>
       </thead>
       <tbody id="ans"> 
       </tbody>
     </table>

     <!-- Esto debe estar al final, antes de cerrar BODY -->
     <script type="text/javascript">
       document.getElementById('encabezado2').style.display ='none';  
     </script>

Todo el código HTML que recibes de la petición AJAX es asignado directamente al cuerpo de la tabla y, por lo tanto, debe contener solo etiquetas válidas para esa estructura. Además, el contenido dentro de <script>...</script> no será interpretado/ejecutado.

"Limpia" el PHP como te dije anteriormente y en la petición AJAX es donde vas a volver a mostrar el encabezado:

function seleccioneArtista() {
   let x = document.getElementById("Artista").value;
   $.ajax({
      url:"showArtista.php",
      method: "POST",
      data:{
          id : x
      },
      success:function(data) {
          console.log(data);
          $("#ans").html(data);
          // Vuelves a mostrar el encabezado
          document.getElementById('encabezado2').style.display ='block';
      }
    });
}

Edición 2: Probando desde el enlace proporcionado

introducir la descripción de la imagen aquí

7
  • Cordial saludo Triby, que pena tanto responderle hasta ahora como tenerle que enviar el siguiente video que realice en youtube ya que stack overflow solo permite 600 caracteres como comentario: youtube.com/watch?v=6ZlspahRYT4 Agradezco su comprensión y saludos!. el 7 oct. 2022 a las 15:17
  • @MartínHernández, acabo de modificar la respuesta, creo que con eso ya se soluciona el problema.
    – Triby
    el 7 oct. 2022 a las 17:21
  • Hola buenos días, muchas gracias por la ayuda pero me sigue presentando el inconveniente, como muestro a continuación: youtu.be/vFqesZ5WMNM que pena la molestia en verdad no sé porque no muestra los componentes, Saludos!. el 11 oct. 2022 a las 14:25
  • 1
    @MartínHernández, acabo de probar desde el enlace que dejaste en la pregunta y parece funcionar correctamente. Agregué una imagen al final de la respuesta.
    – Triby
    el 11 oct. 2022 a las 14:59
  • 1
    @MartínHernández, esa captura es en computadora, probablemente tengas que recargar con CTRL + F5 o borrar el caché del navegador para que funcione.
    – Triby
    el 11 oct. 2022 a las 20:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.