1

Cuando seleeciono los datos , se pasan a otra tabla, y cuando busco varias veces en la tabla principal, se borra la tabla de productos seleccionados,como podria evitarlo y guardarlo en un array de objetos para luego insertarlo en la base de datos .

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="https:https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="https:https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
</head>
<body>

<div >
  <table id="mitabla" border="1" class=" display table display table-striped">


  <thead>
  <tr>
  <th>Check</th>
  <th>Codigo</th>
  <th>Articulo</th>
  <th>Precio</th>
  <th>Cantidad</th>
  <th>Presentacion</th>
  </tr>
  </thead>

  <tbody>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO001</th>
  <th>Mantequilla</th>
  <th>12.5</th>
  <th>50</th>
  <th>En paquete</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO002</th>
  <th>Yogurt</th>
  <th>5.60</th>
  <th>100</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO003</th>
  <th>Gaseosa</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO004</th>
  <th>Pul</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO003</th>
  <th>Gaseosa</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO004</th>
  <th>Pul</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO003</th>
  <th>Gaseosa</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO004</th>
  <th>Pul</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  
  
  
  </tbody>


  </table>
</div>
<table id="tabla2" class=" display table display table-striped">
		<tbody>
		</tbody>
	</table>
</body>

</html>
<script type="text/javascript">
$(document).ready(function() {
$('#mitabla').DataTable({
rowReorder: {
            selector: 'td:nth-child(2)'
        },
        fixedHeader: true,
        responsive: true,
        autoFill: true,
        paging: true,
        ordering: true,
        searching: true,
        info: true,
       // scrollY:        400, // mantiene en tamaño en el eje y
        deferRender:    true,
        scroller:       true,
"language": {

"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del START al END de un total de TOTAL",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0",
"sInfoFiltered": "(filtrado de un total de MAX registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}

}

});


$('input[type=checkbox]').click(function() {
		if($(this).is(":checked"))
		{
			// el checkbox esta marcado
			// movemos la columna a la tabla2
			var tr=$(this).parents("tr").appendTo("#tabla2 tbody");
			
		}else{
			// el checkbox esta desmarcado
			// movemos la columna a la tabla1
			var tr=$(this).parents("tr").appendTo("#mitabla tbody");
		}
		 
	});

	

} );
</script>

1 respuesta 1

1

No es solo de mover la fila de una tabla a otra, tambien tienes que removerla y agregarla en el objeto dataTables. Algo asi:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="https:https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="https:https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
</head>
<body>

<div >
  <table id="mitabla" border="1" class=" display table display table-striped">


  <thead>
  <tr>
  <th>Check</th>
  <th>Codigo</th>
  <th>Articulo</th>
  <th>Precio</th>
  <th>Cantidad</th>
  <th>Presentacion</th>
  </tr>
  </thead>

  <tbody>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO001</th>
  <th>Mantequilla</th>
  <th>12.5</th>
  <th>50</th>
  <th>En paquete</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO002</th>
  <th>Yogurt</th>
  <th>5.60</th>
  <th>100</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO003</th>
  <th>Gaseosa</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO004</th>
  <th>Pul</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO003</th>
  <th>Gaseosa</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO004</th>
  <th>Pul</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO003</th>
  <th>Gaseosa</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO004</th>
  <th>Pul</th>
  <th>3.50</th>
  <th>40</th>
  <th>En botella</th>
  </tr>

  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  <tr>
  <td class="check"><input name="" type="checkbox"></td>
  <th>PRO005</th>
  <th>Jamonada</th>
  <th>2.10</th>
  <th>100</th>
  <th>En paquete</th>
  </tr>
  
  
  
  
  </tbody>


  </table>
</div>
<table id="tabla2" class=" display table display table-striped">
		<tbody>
		</tbody>
	</table>
</body>

</html>
<script type="text/javascript">
$(document).ready(function() {
$('#mitabla').DataTable({
rowReorder: {
            selector: 'td:nth-child(2)'
        },
        fixedHeader: true,
        responsive: true,
        autoFill: true,
        paging: true,
        ordering: true,
        searching: true,
        info: true,
       // scrollY:        400, // mantiene en tamaño en el eje y
        deferRender:    true,
        scroller:       true,
"language": {

"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del START al END de un total de TOTAL",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0",
"sInfoFiltered": "(filtrado de un total de MAX registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}

}

});


$('input[type=checkbox]').click(function() {
    var table = $('#mitabla').DataTable();
		if($(this).is(":checked"))
		{		        
            var row = table.row( $(this).parents('tr') );
            var rowNode = row.node();
            row.remove();
     
			var tr=$(rowNode).appendTo("#tabla2 tbody");
			
		}else{
			// el checkbox esta desmarcado
			// movemos la columna a la tabla1
            var tr=$(this).parents("tr").detach();
            table.row.add(tr).draw();
		}
		 
	});

	

} );
</script>

1
  • hola @alanfcm ,esta bien lo que hiciste,pero adicional a eso quiero que me guarde en un array de objetos o json ,los items seleccionados, y que me enprima con console log, como seria?.
    – Jhon Jesus
    Commented el 15 feb. 2019 a las 0:38

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.