Modal en Bootstrap 4 y DataTables que no carga

publicado por: Anonymous

Tengo una página php que me carga la siguiente tabla:
tabla
el código es este:

<table id="tabla" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Usuario</th>
                    <th scope="col">Sector</th>
                    <th scope="col">Ultimo Ingreso</th>
                    <th scope="col">Acción</th>
                </tr>
            </thead>
            <tbody>
                <?php if ($arrDatos) {
                foreach ($arrDatos as $row) { ?>
                <tr>
                    <td>
                        <?php echo $row['id']; ?>
                    </td>
                    <td>
                        <?php echo $row['usuario']; ?>
                    </td>

                    <td>
                        <?php
                      if ($row['sector'] == 1) { ?>
                            <p>Administración</p>
                            <?php } else { ?>
                            <p>Producción</p>
                            <?php } ?>
                    </td>

                    <td>
                        <?php echo $row['ultimo_acceso']; ?>
                    </td>

                    <td>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#exampleModal" data-id=" <?echo $row[ 'id'];?>"><i class="fas fa-eye"></i></a>

                            <a href="editar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-success btn-sm">
                        <i class="fas fa-edit"></i>
                        </a>
                            <a href="eliminar.php?var=<?php echo base64_encode($row[ 'id']);?>" class="btn btn-danger btn-sm">
                        <i class="fas fa-trash-alt"></i>
                        </a>
                        </div>
                    </td>
                </tr>
                <?php }} ?>
            </tbody>
        </table>

Estaba leyendo que el propio datatables incorpora un visor propio de cada registro:
dtybootstrap

Resulta que segui todos los pasos que se explican en la documentación, como podrán ver no me sale el primer boton que se ve en la imagen:

imagen

en el head tengo lo siguiente:

<link rel="stylesheet" 
 href="../../componentes/bootstrap/css/bootstrap.min.css">
 <script src="../../componentes/jquery-3.3.1.min.js"></script>
 <script src="../../componentes/popper.min.js"></script>
 <script src="../../componentes/bootstrap/js/bootstrap.min.js"></script>

  <link rel="stylesheet" type="text/css" 
  href="../../componentes/DataTables/datatables.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/datatables.js"></script>
  <link rel="stylesheet" href="../../componentes/DataTables/Buttons-
  1.5.1/css/buttons.bootstrap4.min.css">
  <link rel="stylesheet" href="../../componentes/DataTables/Responsive-
  2.2.1/css/responsive.bootstrap4.min.css">
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Buttons-
  1.5.1/js/buttons.bootstrap4.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/dataTables.responsive.min.js"></script>
  <script type="text/javascript" charset="utf8" 
  src="../../componentes/DataTables/Responsive-
  2.2.1/js/responsive.bootstrap4.min.js"></script>

  <link href="../../componentes/fontawesome/on-server/css/fontawesome-
  all.css" rel="stylesheet">
  <script>
  $(document).ready(function() {
    $('#tabla').DataTable({
        language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ 
     registros",
            "sInfoEmpty": "Mostrando de 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar: ",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de 
        manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de 
        manera descendente"
            }
        },

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }
    });
});

</script>

Al principio me estaba rompiendo la cabeza con el modal de bootstrap pero me di cuenta que puedo crear un modal con el propio datatables
no se por que no me esta funcionando… alguien puede darme una mano ?
ME RECOMIENDAN QUE LO HAGA EN EL MODAL DE DATATABLES ? O EL DE BOOTSTRAP ?

solución

Puedes configurar el evento click de tu boton donde defines tu datatable.

$(document).ready(function() {
    $('#tabla').DataTable({
        language: {
            "sProcessing": "Procesando...",
            "sLengthMenu": "Mostrar _MENU_ registros",
            "sZeroRecords": "No se encontraron resultados",
            "sEmptyTable": "Ningún dato disponible en esta tabla",
            "sInfo": "Mostrando del _START_ al _END_ de un total de _TOTAL_ 
     registros",
            "sInfoEmpty": "Mostrando de 0 al 0 de un total de 0 registros",
            "sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix": "",
            "sSearch": "Buscar: ",
            "sUrl": "",
            "sInfoThousands": ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst": "Primero",
                "sLast": "Último",
                "sNext": "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending": ": Activar para ordenar la columna de 
        manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de 
        manera descendente"
            }
        },

        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })
            }
        }
    }).on('click', 'button', function () { 
          let obj = $('#tabla').row($(this).parents('tr')).data(); 
          getDataModal(obj.id); //consulta ajax para cargar los datos
          modalDetalle.modal('show'); //Modal configurado previamente js/html
     });
});
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *