0

Estoy generando un datatable dinámico en el cual muestro registros de mi base de datos. El problema es que a pesar de que la estructura de la tabla es responsive las filas no lo son. Esta es la forma en la que se muestra mi data table introducir la descripción de la imagen aquí

Este es mi html5

<div class="panel">
            <div class="panel-body">
                <table class="table table-responsive" id="lista_sug_activas" width="100%">
                    <thead>
                        <tr class="bg-light">
                            <th class="text-center">FOLIO</th>
                            <th class="">NOM. CORTO</th>
                            <th class="">SUB. PERTENECIENTE</th>
                            <th class="">DEPTO/AREA</th>
                            <th class="">NOM. TRABAJADOR</th>
                            <th class="">UBICACION</th>
                            <th class="">FECHA & HORA</th>
                            <th class="text-right">STATUS</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

Este es mi ajax con el cual genero mi data table

$('#lista_sug_activas').DataTable({
     processing: true,
     serverSide: true,
     ajax: {
      url: "{{ route('Sugerencias.Lista.AdmAccept') }}",
      type: 'GET',
     },
     autoWidth: true,
     columns: [ 
                { data: 'folio'},
                { data: 'asunto'},
                { data: 'subdireccion'},
                { data: 'depto_area'},
                { data: 'descripcion'},
                { data: 'ubicacion'},
                { data: 'fecha'},
                { data: 'status_sug' },

              ]
  });

2 respuestas 2

1

Según he revisado en la documentación debes agregar a la tabla la clase responsive.

Por otro lado, en la documentación de bootstrap, la clase table-responsive la sitúan de la siguiente manera:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Puede que el hecho de incluir la tabla dentro de un div de clase responsive solucione tu problema.

1
  • de hecho si lo realice, me da el mismo problema yo creía que el problema estaba en el ajax donde estaba generando el datatable dinamico el 11 jun. 2020 a las 0:34
0

encontré la solución.

$('#lista_sug_activas').DataTable({
     processing: true,
     serverSide: true,
     ajax: {
      url: "{{ route('Sugerencias.Lista.AdmAccept') }}",
      type: 'GET',
     },
     autoWidth: true,
    columns: [ 
                { data: 'folio'},
                { data: 'asunto'},
                { data: 'subdireccion'},
                { data: 'depto_area'},
                { data: 'descripcion'},
                { data: 'ubicacion'},
                { data: 'fecha'},
                { data: 'status_sug' },
              ],
    scrollY:        "500px",
    scrollX:        true,
    scrollCollapse: true,
    paging:         false,
    columnDefs: [
        { width: '20%', targets: 0 }
    ]

  });

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.