About the DataTables library

Question

About the DataTables library

Navigation

#1 by (2 votes)

1

I have the following question: I am using the datatables library, so that it shows me in mobile format, the second and third columns as removable and do not collapse automatically starting with the last column, that is, I want it to be as you see in the image but instead of the description that is displayed options with the buttons and when I click on the name, I will be displayed both the description and the players

$(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>

datatable

asked by Miguel C 22.03.2018 в 09:17

source

1 answer

how to update a data table by cleaning the records by clicking on a button? as valid that there are no duplicate records?

score 2 · Accepted Answer

You can control which order the columns are hidden with the columns.responsivePriority option.

In your case you want to keep the first and last column so we use columnDefs to identify them, you could also use just columns and give a priority to each column according to your needs:

$(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>