DataTables I can not modify the width of the columns

2

I'm making a table using Datatables but I can not change the widths of the columns.

/*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>
    
asked by Leiregop 14.03.2018 в 11:14
source

1 answer

1

The reality if you are taking the configured widths, the problem is that by default the DataTable v1.10 is " responsive ", that is, all table.dataTable has width: 100% .

Solution:

You could create a class to step on this default configuration.

Example:

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>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>
    
answered by 14.03.2018 / 12:20
source