1

No tengo del todo claro el tema ahora mismo, pero va del siguiente modo.

Tengo una datatable, con filas de datos, al realizar click a alguna de estas, se ejecuta una acción inmediata que abre otra página, pero por motivos de ejemplo, hace X acción.
Lo que me lleva a notar un error de control, en el que si quisiera seleccionar algún dato de la fila, este no podría ser seleccionado libremente, por que la fila termina siendo abierta.
Ejemplo del problema -> https://i.gyazo.com/f61d1f80a3ccbebc5314a519322842ab.mp4

Ahora, lo que se me ha ocurrido, es realizar 2 acciones, una que sea el select de la fila, y otra que sea la apertura de esta fila seleccionada. Pero no entiendo como pudiese ser.

Hasta ahora tengo esto, que es la opcion de seleccionar y realiza un selected para marcar dicha fila.

$(document).ready(function() {
  var table = $('#general').DataTable();
  $('#general tbody').on('click', 'tr', function() {
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      table.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
    }
    alert("Se ha abierto otra pestaña");
  });
});
<head>
  <title>Resumen Histórico</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<table border=1 id="general">
  <thead>
    <tr>
      <th>Razon Social</th>
      <th>Representante</th>
      <th>Fecha Inicio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
  </tbody>
  <script>
    $(document).ready(function() {
      $('#general').DataTable({
        dom: ''
      });
    });

  </script>
</table>

1 respuesta 1

1

Por temas de usabilidad, lo que se suele tener es una columna de "acciones" en donde se le añade un "Ver detalle" o similar. Así dejas la tabla libre para el copy/paste y obtienes una columna nueva donde poder añadir otras acciones adicionales en caso de necesidad (borrar, editar...)

$(document).ready(function() {
  var table = $('#general').DataTable();
  $('#general tbody').on('click', '.detalle', function() {
    alert("Se ha abierto otra pestaña");
  });
});
<head>
  <title>Resumen Histórico</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<table border=1 id="general">
  <thead>
    <tr>
      <th>Razon Social</th>
      <th>Representante</th>
      <th>Fecha Inicio</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
      <td><a href="#" class="detalle">Ver detalle</a></td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
      <td><a href="#" class="detalle">Ver detalle</a></td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
      <td><a href="#" class="detalle">Ver detalle</a></td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
      <td><a href="#" class="detalle">Ver detalle</a></td>
    </tr>
  </tbody>
  <script>
    $(document).ready(function() {
      $('#general').DataTable({
        dom: ''
      });
    });

  </script>
</table>

Solución a través de evento doble click

$(document).ready(function() {
  var table = $('#general').DataTable();
  $('#general tbody').on('dblclick', 'tr', function() {
    alert("Se ha abierto otra pestaña");
  });
});
<head>
  <title>Resumen Histórico</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.23/af-2.3.5/b-1.6.5/b-colvis-1.6.5/b-flash-1.6.5/b-html5-1.6.5/b-print-1.6.5/cr-1.5.3/fc-3.3.2/fh-3.1.8/kt-2.6.1/r-2.2.7/rg-1.1.2/rr-1.2.7/sc-2.0.3/sb-1.0.1/sp-1.2.2/sl-1.3.1/datatables.min.js"></script>

  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<table border=1 id="general">
  <thead>
    <tr>
      <th>Razon Social</th>
      <th>Representante</th>
      <th>Fecha Inicio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
    <tr>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>MONICA ERIKA GARCIA RUBIO</td>
      <td>18-03-2021</td>
    </tr>
  </tbody>
  <script>
    $(document).ready(function() {
      $('#general').DataTable({
        dom: ''
      });
    });

  </script>
</table>

5
  • Por temas de espacio, se deshizo de esa fila de "acciones" para ocuparla con datos necesarios a visualizar. Por eso es que al hacer click a una columna, se abre otra pestaña diferente.
    – Excorpion
    Commented el 26 oct. 2021 a las 16:06
  • Entonces lo que tienes que haces es atentar contra la usabilidad natural. Podrías usar un evento doble click en vez del click para el tema de acceder a los detalles. Pero también tendrías que añadir una anotación junto a la tabla para que el cliente sepa como acceder.
    – phpMyGuel
    Commented el 26 oct. 2021 a las 16:08
  • Como un indicador que resalte que debes hacer 2 clicks ??
    – Excorpion
    Commented el 26 oct. 2021 a las 16:09
  • Algo que guie al usuario para que sepa como actuar. Porque no es el funcionamiento normal para una tabla.
    – phpMyGuel
    Commented el 26 oct. 2021 a las 16:09
  • Edité para añadir una posible solución con el evento dblclick.
    – phpMyGuel
    Commented el 26 oct. 2021 a las 16:13

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.