2

Estoy haciendo una tabla usando Datatables pero no consigo que se modifiquen los anchos de las columnas.

/*Modificar funciones tabla listado*/
$(document).ready(function() {
  $("#table_id").DataTable({
    sDom: '<"top"fli>t<"bottom"p><"clear">r',
    sPaginationType: "full_numbers",
    bProcessing: true,
    bAutoWidth: false,
    language: {
      decimal: "",
      emptyTable: "No hay test",
      info:
        "Mostrando desde el _START_ al _END_ del total de _TOTAL_ registros",
      infoEmpty: "Mostrando desde el 0 al 0 del total de  0 registros",
      infoFiltered: "(Filtrados del total de _MAX_ registros)",
      infoPostFix: "",
      thousands: ",",
      lengthMenu: "Mostrar _MENU_ registros por página",
      loadingRecords: "Cargando...",
      processing: "Procesando...",
      search: "Filtrar:",
      zeroRecords: "No se ha encontrado nada  atraves de ese filtrado.",
      paginate: {
        first: "Primera",
        last: "Última",
        next: "Siguiente",
        previous: "Anterior"
      },
      aria: {
        sortAscending: ": activate to sort column ascending",
        sortDescending: ": activate to sort column descending"
      }
    },
    columnDefs: [
      { width: "10px", targets: 0 },
      { width: "40px", targets: 1 },
      { width: "100px", targets: 2 },
      { width: "70px", targets: 3 },
      { width: "70px", targets: 4 },
      { width: "70px", targets: 5 }
    ]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Sanitario</th>
            <th>Nombre</th>
            <th>Apellidos</th>
            <th>Edad</th>
            <th>Fecha</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Hola</td>
            <td>web</td>
            <td>raro</td>
            <td>Prueba</td>
            <td>Prueba</td>
            <td>
                <button class="pr-3 pl-3">
                    <i class="fas fa-eye"></i> Ver</button>
            </td>
        </tr>
        <tr>
            <td>qwe</td>
            <td>adf</td>
            <td>raro</td>
            <td>Prueba</td>
            <td>Prueba</td>
            <td>
                <button class="pr-3 pl-3">
                    <i class="fas fa-eye"></i> Ver</button>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th rowspan="1" colspan="1">TOTAL</th>
            <th colspan="5" rowspan="1">
                <span id="total">19</span> Tests</th>
        </tr>
    </tfoot>
</table>

3 respuestas 3

2

El realidad si te esta tomando los anchos configurados, el problema es que por defecto el DataTable v1.10 es "responsive", es decir, todo table.dataTable tiene width: 100%.

Solución:

Podrías crear una clase para pisar esta configuración por defecto.

Ejemplo:

table.dataTable.dataTable_width_auto {
  width: auto;
}

Demo:

$(document).ready(function() {
  $("#table_id").DataTable({
    sDom: '<"top"fli>t<"bottom"p><"clear">r',
    sPaginationType: "full_numbers",
    bProcessing: true,
    bAutoWidth: false,
    language: {
      decimal: "",
      emptyTable: "No hay test",
      info: "Mostrando desde el _START_ al _END_ del total de _TOTAL_ registros",
      infoEmpty: "Mostrando desde el 0 al 0 del total de  0 registros",
      infoFiltered: "(Filtrados del total de _MAX_ registros)",
      infoPostFix: "",
      thousands: ",",
      lengthMenu: "Mostrar _MENU_ registros por página",
      loadingRecords: "Cargando...",
      processing: "Procesando...",
      search: "Filtrar:",
      zeroRecords: "No se ha encontrado nada  atraves de ese filtrado.",
      paginate: {
        first: "Primera",
        last: "Última",
        next: "Siguiente",
        previous: "Anterior"
      },
      aria: {
        sortAscending: ": activate to sort column ascending",
        sortDescending: ": activate to sort column descending"
      }
    },
    columnDefs: [{
        width: "10px",
        targets: 0
      },
      {
        width: "40px",
        targets: 1
      },
      {
        width: "100px",
        targets: 2
      },
      {
        width: "70px",
        targets: 3
      },
      {
        width: "70px",
        targets: 4
      },
      {
        width: "70px",
        targets: 5
      }
    ]
  });
});
table.dataTable.dataTable_width_auto {
  width: auto;
}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="table_id" class="display dataTable_width_auto">
  <thead>
    <tr>
      <th>Sanitario</th>
      <th>Nombre</th>
      <th>Apellidos</th>
      <th>Edad</th>
      <th>Fecha</th>
      <th>Acciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hola</td>
      <td>web</td>
      <td>raro</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>
        <button class="pr-3 pl-3">
                    <i class="fas fa-eye"></i> Ver</button>
      </td>
    </tr>
    <tr>
      <td>asdasddasdasdasdsadasdasdasdasdasdsaddasdsad</td>
      <td>adf</td>
      <td>raro</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>
        <button class="pr-3 pl-3">
                    <i class="fas fa-eye"></i> Ver</button>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th rowspan="1" colspan="1">TOTAL</th>
      <th colspan="5" rowspan="1">
        <span id="total">19</span> Tests</th>
    </tr>
  </tfoot>
</table>

1
  • Gracias ya está solucionado.
    – Leiregop
    el 15 mar. 2018 a las 9:15
0

Al usar DataTables,tienes que tener en cuenta que hay distintos "contenedores" , por lo que en mi caso bastó crear una clase css

.text-truncate {
width:100px !important;
vertical-align: middle !important;
overflow: hidden !important;
text-overflow: ellipsis !important;

} Despues, tanto en la deficinicion de columnas puedes tener algo como esto :

 {
 "name": "columna1","data": "columna1","targets": 0,

 "render": function (data, type, row) {
 return '<label class="text-truncate">' + data + '</label>';
  }

},

Recuerda, que si tienes y también debes aplicarle los estilos, sino los cambios del contenido, no tendrá efecto, ya que el tamaño de las cabeceras los condiciona. No hace falta cambiar el autoWidth, se puede quedar en true sin problemas.

-1

Lo que puedes hacer es poner el estilo en la linea del HTML como esto:

<table id="tablaUsuarios" class="table table-striped table-bordered table-condensed" style="width:100%" >

Mira, al final esta style="width:100%"

Tu Respuesta

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

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