Tengo una página php que me carga la siguiente 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:
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 ?