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? Commented 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
    Commented el 30 may. 2018 a las 20:56
  • coloque en la tabla esta clase: class="display responsive nowrap" style="width:100%"
    – WilsonicX
    Commented el 30 may. 2018 a las 20:56
  • y agregue estas librerias:
    – WilsonicX
    Commented 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
    Commented el 30 may. 2018 a las 20:57

2 respuestas 2

4

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
    Commented el 30 may. 2018 a las 21:04
  • Genial, lo hice con gusto. Feliz día. Commented 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

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.