1

Estoy intentando agregar el jquiery del dataTable a mi proyecto para mostrar la tabla con el campo de buscador y la paginación pero no lo consigo. estoy utilizando las siguientes archivos para el dataTable.

<script src="js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="css/jquery.dataTables.min.css"> 
y la función 
 <script>
  $(document).ready(function(){
    $('#myTable').DataTable();
});
 </script>

Y mi tabla la creo de la siguiente manera:

 <table id="myTable" class='table table-striped table-hover table-condensed table-bordered'>                        
<tr>
  <th>T. Documento</th><th># Documento</th><th>Nombres</th><th>Acción</th>

    </tr>			
    <?php
    $mysqli = new mysqli("localhost", "root", "root", "escuela");
       if ($mysqli->connect_errno) {
       echo "Fallo al conectar a MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
       exit();
        }
      $consulta = "SELECT id_jugador, id_td, nombre_td, documento, nombres FROM jugador NATURAL JOIN tipodocumento;";

       if ($resultado = $mysqli->query($consulta)) {
         while ($fila = $resultado->fetch_row()) {
          echo "<tr>";
          echo "<td>$fila[2]</td><td>$fila[3]</td><td>$fila[4]</td>";
          echo"<td>";
          ?>		
    </table>

He buscado pero encuentro tutoriales donde la tabla la crean de otra forma y y trato de adaptarlo a lo que tengo pero no me funciona. Si alguien me puede colaborar lo agradezco.

5
  • te manda algún error en alerta o algún error en la consola del navegador?
    – JuankGlezz
    el 30 jun. 2017 a las 17:08
  • No manda nada, simplemente muestra la tabla normal y no muestra el buscador ni la paginación.
    – user48203
    el 30 jun. 2017 a las 17:11
  • Una pregunta un poco tonta... ¿Has añadido el Jquery? ya que es necesario para el datatables. DataTables 1.10+ and its extensions require with jQuery 1.7 or newer.
    – pwron
    el 30 jun. 2017 a las 17:51
  • Tu tabla cuenta con las etiquetas <thead> y <tbody>? ya que también puede ser un problema el que no las tenga.
    – JuankGlezz
    el 30 jun. 2017 a las 18:21
  • Puede ver nuevamente la publicación, escribí todo el código de la tabla, efectivamente no tiene un <head> y <tbody>, pero al crear la tabla de esta forma como le agregaría el <thead> y <tbody>
    – user48203
    el 30 jun. 2017 a las 18:32

1 respuesta 1

1

En tu código falta la referencia a jQuery y al CSS de Datatables.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>

Además de tener que tener las etiquetas thead y tbody.

El código final:

<html>
    <head>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

   <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
 <script>
  $(document).ready(function(){
    $('#example').DataTable();
});
 </script>
    </head>
    <body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
               <th>T. Documento</th><th># Documento</th><th>Nombres</th><th>Acción</th>
            </tr>
        </thead>
        <tbody>
         <?php
    $mysqli = new mysqli("localhost", "root", "root", "escuela");
       if ($mysqli->connect_errno) {
       echo "Fallo al conectar a MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
       exit();
        }
      $consulta = "SELECT id_jugador, id_td, nombre_td, documento, nombres FROM jugador NATURAL JOIN tipodocumento;";

       if ($resultado = $mysqli->query($consulta)) {
         while ($fila = $resultado->fetch_row()) {
          echo "<tr>";
          echo "<td>$fila[2]</td><td>$fila[3]</td><td>$fila[4]</td>";
          echo"</tr>";
          ?>        
        </tbody>
    </table>
    </body>
    </html>

Tu Respuesta

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