1

Tengo la siguiente cuestión: estoy usando la librería datatables, para que me muestre en formato móvil, la segunda y tercera columna como despegable y no haga un colapso automaticamente empezando por la ultima columna, es decir quiero que quede como veis en la imagen pero en vez de la descripción que se visualize opciones con los botones y cuando haga un click sobre nombre pues se me despliegue tanto la descripcion como los jugadores

introducir la descripción de la imagen aquí

$(document).ready(function() {
  $('#example').dataTable({
    "searching": false,
    "paging": false,
    "ordering": false,
    "info": false,
    "type": "column"
  });
});
<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>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css' />



<table id="example" class="display responsive nowrap dtr-inline collapsed" style="width:100%">
  <thead>
    <tr style="background-color:grey;">
      <th>Nombre</th>
      <th>Descripción</th>
      <th>Jugadores</th>
      <th>Opciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Miguel</td>
      <td>Jugador de futbol</td>
      <td>5</td>
      <td>
        <button>Borrar</button>
        <button>Editar</button>
      </td>

    </tr>
    <tr>
      <td>Miguel</td>
      <td>Jugador de futbol</td>
      <td>5</td>
      <td>
        <button>Borrar</button>
        <button>Editar</button>
      </td>
    </tr>
    <tr>
      <td>Miguel</td>
      <td>Jugador de futbol</td>
      <td>5</td>
      <td>
        <button>Borrar</button>
        <button>Editar</button>
      </td>
    </tr>
  </tbody>
</table>

0

1 respuesta 1

2

Puedes controlar en que orden se ocultan las columnas con la opcion columns.responsivePriority.

En tu caso quieres mantener la primera y última columna así que usamos columnDefs para identificarlas, también podrías usar simplemente columns y dar una prioridad a cada columna según tus necesidades:

$(document).ready(function() {
  $('#example').dataTable({
    "searching": false,
    "paging": false,
    "ordering": false,
    "info": false,
    "type": "column",
    responsive: true,
    columnDefs: [
      { responsivePriority: 1, targets: 0 },
      { responsivePriority: 2, targets: -1 }
    ]
  });
});
<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>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.min.css' />



<table id="example" class="display responsive nowrap dtr-inline collapsed" style="width:100%">
  <thead>
    <tr style="background-color:grey;">
      <th>Nombre</th>
      <th>Descripción</th>
      <th>Jugadores</th>
      <th>Opciones</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Miguel</td>
      <td>Jugador de futbol</td>
      <td>5</td>
      <td>
        <button>Borrar</button>
        <button>Editar</button>
      </td>

    </tr>
    <tr>
      <td>Miguel</td>
      <td>Jugador de futbol</td>
      <td>5</td>
      <td>
        <button>Borrar</button>
        <button>Editar</button>
      </td>
    </tr>
    <tr>
      <td>Miguel</td>
      <td>Jugador de futbol</td>
      <td>5</td>
      <td>
        <button>Borrar</button>
        <button>Editar</button>
      </td>
    </tr>
  </tbody>
</table>

2
  • gracias, lo he probado y funciona perfectamente.
    – Miguel C
    Commented el 22 mar. 2018 a las 10:11
  • Me alegro de que te haya servido, en ese caso deberías marcar la respuesta como aceptada para que otros que tengan la misma duda vean que está resuelta
    – user7176
    Commented el 22 mar. 2018 a las 11:15

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.