1

Desconozco el por qué no puede aplicarse el datatable a la tabla que tengo cuando sigo los pasos para añadirlo, he intentado con realizar nuevamente todo desde el inicio pero aún así sigue sin reflejarse

<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<!-- Este lo obtuve de datatable -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.4/datatables.min.css"/>
        
<!-- La tabla -->
<div class="row justify-content-center">
                <table class="table table-hover" id="myTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Location</th>
                            <th colspan="2">Action</th>
                        </tr>
                    </thead>

                    <?php
                        while($row = $result->fetch_assoc()): ?>
                    <tr>
                        <td><?php echo $row['name']; ?></td>
                        <td><?php echo $row['location']; ?></td>
                        <td>
                            <a href="index.php?edit=<?php echo $row['id']; ?>" class="btn btn-info">Edit</a>
                            <a href="process.php?delete=<?php echo $row['id']; ?>" class="btn btn-danger">Delete</a>
                        </td>
                    </tr>
                    <?php endwhile;?>
                </table>
            </div>
            
            
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- El otro script que obtuve de datatable y el código que llama a la función  -->            

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.4/datatables.min.js"></script>
        
        <script>
            $(document).ready( function () {
                $('#myTable').DataTable();
            } );
        </script>

¿Es el navegador? ¿Es la versión de Bootstrap? ¿Estoy olvidando cerrar alguna etiqueta? Porque sigo las indicaciones de datatables.net seleccionando la versión de bootstrap 4 y jquery 3 para evitar tantos problemas, pero continúa siendo de esa manera

2
  • 2
    El contenido que tienes en el for en php que genera los tr debe de ir dentro de una etiqueta <tbody> Commented el 25 feb. 2022 a las 17:28
  • Cierto... supongo que seguir esa "guía" al pie de la letra me hizo incapaz de ver ese apartado
    – ang3les96
    Commented el 25 feb. 2022 a las 21:13

1 respuesta 1

3

Datatables utiliza un sistema un poco distinto para usar atributos colspan o rowspan. En este enlace a su documentación encontrarás más información.

En tu caso concreto no deberias usar ninguno, puesto que tus columnas son 3 y sin embargo defines 3 encabezados th pero uno con colspan="2", como si luego hubiera 4 columnas, que no las hay, y eso provoca error en el javascript de datatables.

En este snippet mostrado a continuación tan solo le he quitado el colspan y funciona bien (exceptuando el código php que se pone por enmedio porque no está resuelto, pero ya no da error de javascript).

<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<!-- Este lo obtuve de datatable -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.4/datatables.min.css"/>
        
<!-- La tabla -->
<div class="row justify-content-center">
                <table class="table table-hover" id="myTable">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Location</th>
                            <th>Action</th>
                        </tr>
                    </thead>

                    <?php
                        while($row = $result->fetch_assoc()): ?>
                    <tr>
                        <td><?php echo $row['name']; ?></td>
                        <td><?php echo $row['location']; ?></td>
                        <td>
                            <a href="index.php?edit=<?php echo $row['id']; ?>" class="btn btn-info">Edit</a>
                            <a href="process.php?delete=<?php echo $row['id']; ?>" class="btn btn-danger">Delete</a>
                        </td>
                    </tr>
                    <?php endwhile;?>
                </table>
            </div>
            
            
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- El otro script que obtuve de datatable y el código que llama a la función  -->            

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.4/datatables.min.js"></script>
        
        <script>
            $(document).ready( function () {
                $('#myTable').DataTable();
            } );
        </script>

Datatables necesita que cada columna tenga su propio encabezado, sin excepción, pero permite usar dos encabezados, donde se puede usar el primero con colspan y rowspan y el segundo debe corresponderse con las columnas de forma exacta.

Por ejemplo, tu código podria ser válido tambien de este modo:

<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<!-- Este lo obtuve de datatable -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.4/datatables.min.css"/>
        
<!-- La tabla -->
<div class="row justify-content-center">
  <table class="table table-hover" id="myTable">
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th colspan="2">Action</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Location</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <?php
    while($row = $result->fetch_assoc()): ?>
    <tr>
      <td><?php echo $row['name']; ?></td>
      <td><?php echo $row['location']; ?></td>
      <td>
        <a href="index.php?edit=<?php echo $row['id']; ?>" class="btn btn-info">Edit</a>
      </td>
      <td>
        <a href="process.php?delete=<?php echo $row['id']; ?>" class="btn btn-danger">Delete</a>
      </td>
    </tr>
    <?php endwhile;?>
  </table>
</div>
            
            
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<!-- El otro script que obtuve de datatable y el código que llama a la función  -->            

<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jq-3.6.0/dt-1.11.4/datatables.min.js"></script>
        
        <script>
            $(document).ready( function () {
                $('#myTable').DataTable();
            } );
        </script>

Fíjate que he separado los botones en dos columnas, para que coincidieran con los segundos encabezados.

4
  • Luego de leer la documentación puedo "verlo", pero realmente necesitaba ayuda, muchas gracias por haberla otorgado
    – ang3les96
    Commented el 25 feb. 2022 a las 21:14
  • 1
    Tambien puedes verlo en mi respuesta, tan solo dale al enlace "Mostrar fragmento de codigo" y una vez expandido le das al botón Ejecutar que aparece al pie de cada fragmento para ejecutarlo. Los pongo así para que la respuesta no sea larga de leer y se entienda con la explicación, pero los fragmentos son para ejecutarse y pueden "verse" aqui tambien :-)
    – masterguru
    Commented el 25 feb. 2022 a las 21:18
  • Nuevamente, muchas gracias por la ayuda :)
    – ang3les96
    Commented el 25 feb. 2022 a las 21:19
  • 1
    Me alegro te haya servido :-) Saludos!
    – masterguru
    Commented el 25 feb. 2022 a las 21:20

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.