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>