0

estoy haciendo uso de dataTables, y necesito mostrar más de 10 columnas en pantalla, pero por más que he intentado no logro hacer que se vean todas las columnas, no sé si haya una manera de poder lograrlo. He aquí mi código:

Llamo mi dataTable en Jquery:

//llamado a datatables
$(document).ready(function(){
    $('.table').dataTable();
});

Este es mi HTML (estoy trabajando con Django):

    <table class="table table-striped table-hover">
    <thead>
        <th>Fecha</th>
        <th>Hora Llenado</th>
        <th>Placa</th>
        <th>Piloto</th>
        <th>Ruta</th>
        <th>Serie Factura</th>
        <th>No. Factura</th>
        <th>Total Llenado</th>
        <th>Galones Llenados</th>
        <th>Tipo Combustible</th>
        <th>No. Bomba</th>
        <th>Precio Por Galon</th>
        <th>Kilometraje Inicial</th>
        <th>Kilometraje Final</th>
        <th>Recorrido</th>
        <th>Rendimiento Por Galon</th>
        <th>Manifiesto</th>
        <th>Observaciones</th>
        <th>Estado</th>
    </thead>
    <tbody>
        {% for item in obj %} 
        <tr>
            <td> {{ item.fecha | date:'d-m-y'}}</td>
            <td> {{ item.hora_llenado | title}}</td>
            <td> {{ item.placa | title}}</td>
            <td> {{ item.piloto | title}}</td>
            <td> {{ item.ruta | title}}</td>
            <td> {{ item.serie | title}}</td>
            <td> {{ item.no_factura | title}}</td>
            <td> Q. {{ item.total | intcomma }}</td>
            <td> {{ item.galones | title}}</td>
            <td> {{ item.tipo_combustible | title}}</td>
            <td> {{ item.bomnba | title}}</td>
            <td> Q. {{ item.precioxgalon | intcomma }}</td>
            <td> {{ item.kminicial | title}}</td>
            <td> {{ item.kmfinal | title}}</td>
            <td> {{ item.recorrido | title}}</td>
            <td> {{ item.rendimiento | title}}</td>
            <td> {{ item.manifiesto | title}}</td>
            <td> {{ item.observaciones | title}}</td>
            <td onclick="inactivar({{item.id}})">{#item.estado|yesno:"Activo,Inactivo"#}
            {% if item.estado %}
            <i class="far fa-thumbs-up text-primary"></i>
            {% else %}
            <i class="far fa-thumbs-down text-danger"></i>
            {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

Captura de como se ve mi tabla La única manera que he logrado que se logren visualizar todas las columnas es poniendole un zoom: 80% al table. De esta manera:

.table{
   zoom: 80%;
}

Espero alguien me pueda ayudar, Gracias de antemano!.

3
  • Has probado a establecer manualmente los anchos de las columnas? Prueba también la clase compact de datatables para intentar reducir un poco los paddings. Commented el 10 feb. 2022 a las 11:54
  • Si, ya he intentado eso, y ya están al ancho minimo. Probaré esa clase que dices. Commented el 10 feb. 2022 a las 20:31
  • Si estás usando bootstrap, como parece, tienes la clase table-responsive para que al menos te muestre una barra horizontal y puedas desplazarte con ella. Fíjate bien en el enlace donde se parecia que esa clase debe envolver a la clase table.
    – masterguru
    Commented el 1 mar. 2022 a las 9:21

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.