0

Hola amigos tengo esta dataTable en mi vista:

<table id="eventos" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Salon</th>
                                <th>Instructor</th>
                                <th>Curso</th>
                                <th>Hora de Inicio</th> 
                                <th>Hora de Fin</th> 
                                <th>Fecha</th> 
                                <th>Estado del Evento</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php if(!empty($eventos)):?>
                                <?php foreach($eventos as $evento):?>
                                    <tr>
                                        <td><?php echo $evento->id;?></td>
                                        <td><?php echo $evento->salones;?></td>
                                        <td><?php echo $evento->instructores;?></td>
                                        <td><?php echo $evento->cursos;?></td>
                                        <td><?php echo $evento->hora_inicio;?></td>
                                        <td><?php echo $evento->hora_fin;?></td>
                                        <td><?php echo $evento->fecha;?></td>
                                        <td><?php if ($evento->estado == "1") {
                                                echo '<span class="label label-success">Iniciado</span>';
                                            }else{
                                                echo '<span class="label label-danger">Finalizado</span>';
                                            } ?></td>
                                        <?php $dataevento = $evento->id."*".$evento->salones."*".$evento->instructores."*".$evento->cursos."*".$evento->hora_inicio."*".$evento->hora_fin."*".$evento->fecha."*".$evento->estado;?>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-info btn-view-eventos" data-toggle="modal" data-target="#modal-default" value="<?php echo $dataevento?>">
                                                    <span class="fa fa-search"></span>
                                                </button>
                                                <a href="<?php echo base_url();?>mantenimiento/eventos/delete/<?php echo $evento->id;?>" class="btn btn-danger btn-remove"><span class="fa fa-remove"></span></a>
                                            </div>
                                        </td>
                                    </tr>
                                <?php endforeach;?>
                            <?php endif;?>
                        </tbody>
                    </table>

y esto lo tengo el footer que son las propiedades, la mando a llamar por medio del id que le tengo asignado a la tabla: id=eventos:

$('#eventos').DataTable({
    "language": {
        "lengthMenu": "Mostrar _MENU_ registros por pagina",
        "zeroRecords": "No se encontraron resultados en su busqueda",
        "searchPlaceholder": "Buscar registros",
        "info": "Mostrando registros de _START_ al _END_ de un total de  _TOTAL_ registros",
        "infoEmpty": "No existen registros",
        "infoFiltered": "(filtrado de un total de _MAX_ registros)",
        "search": "Buscar:",
        "paginate": {
            "first": "Primero",
            "last": "Último",
            "next": "Siguiente",
            "previous": "Anterior"
        },
    }
});

ya le coloque la propiedad dentro del jQuery pero no funciona sigue apareciendo igual cuando lo pongo en modo telefono o tablet.

responsive: true

que podra ser? o de que manera se puede hacer? muchas gracias por su atencion.

8
  • usas datatable solo , o usas algun framework de diseño como bootstrap , material? el 30 may. 2018 a las 20:48
  • Que tal amigo gracias por tomarte el tiempo lo resolvi de la siguiente manera, lo colocare arriba, saludos
    – WilsonicX
    el 30 may. 2018 a las 20:56
  • coloque en la tabla esta clase: class="display responsive nowrap" style="width:100%"
    – WilsonicX
    el 30 may. 2018 a las 20:56
  • y agregue estas librerias:
    – WilsonicX
    el 30 may. 2018 a las 20:57
  • <script src="<?php echo base_url();?>assets/template/datatables.net/js/dataTables.responsive.min.js"></script>
    – WilsonicX
    el 30 may. 2018 a las 20:57

2 respuestas 2

3

Primero que todo tienes que adicionar la extensión Responsive a tu DataTables. Si no la tienes, el link a la extensión: https://datatables.net/extensions/responsive

Ahí encontrarás cómo instalarla y configurarla.

Para su uso, la documentación de DataTables indica que para usar la propiedad responsive: true y funcione, tu tabla debe tener en el atributo class la clase nowrap y un width del 100%, por lo que tu código pasaría de:

<table id="eventos" class="table table-bordered table-hover">

A:

<table id="eventos" class="table table-bordered table-hover nowrap" style="width:100%">

Espero que con esto te funcione. Sin embargo te dejo el ejemplo para aplicar una tabla responsive con Bootstrap: https://datatables.net/extensions/responsive/examples/initialisation/option.html

Espero te sea de ayuda.

2
  • Gracias me sirvio de mucho, igual ya habia encontrado la solucion pero gracias por tomarte tu tiempo, un saludo!
    – WilsonicX
    el 30 may. 2018 a las 21:04
  • Genial, lo hice con gusto. Feliz día. el 30 may. 2018 a las 21:09
1

para el css agregue las librerias:

<link rel="stylesheet" href="<../../assets/template/datatables.net-bs/css/responsive.dataTables.min.css">

y para el javascript:

<script src="<../../assets/template/datatables.net/js/dataTables.responsive.min.js"></script>

y en las clases de la table coloque esto:

        <table id="eventos" class="display responsive nowrap" style="width:100%">

y en el js:

$('#eventos').DataTable({
    responsive: true
});

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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