How to place responsive dataTables

Navigation
0

Hello friends, I have this dataTable in my view: 

<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>

and this I have the footer that are the properties, I send it to call by means of the id that I have assigned to the table: id = events: 

$('#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"
        },
    }
});

I already put the property inside the jQuery but it does not work it keeps appearing the same when I put it in phone or tablet mode. 

responsive: true

what could it be? or in what way can it be done? Thank you very much for your attention.

    
asked by WilsonicX 30.05.2018 в 22:44
source

2 answers

2

First of all you have to add the Responsive extension to your DataTables. If you do not have it, the link to the extension: link

There you will find how to install and configure it.

For its use, the DataTables documentation indicates that to use the responsive: true property and work, your table must have the class attribute the nowrap class and a width of 100%, so your code would go from: 

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

A: 

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

I hope this works for you. However, I'll give you the example to apply a responsive table with Bootstrap: link

I hope it helps you.

    
answered by 30.05.2018 / 23:00
source
0

for the css add the libraries: 

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

and for javascript: 

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

and in the classes of the table place this: 

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

and in the js: 

$('#eventos').DataTable({
    responsive: true
});
    
answered by 30.05.2018 в 23:02
In an array [] I have to extract the maximum and if another position is also maximum concatenate it Format LocalTime