Lo que quiero hacer es permitir que mis usuarios seleccionen varias filas en una tabla y presionen un botón para devolver estos datos. Mi archivo de script JS tiene lo siguiente:
<script> $(document).ready(function () { // Setup - add a text input to each footer cell $('#example tfoot th').each(function () { var title = $(this).text(); $(this).html('<input type="text" placeholder="Search ' + title + '" />'); }); $('#example tbody').on('click', 'tr', function () { $(this).toggleClass('selected'); }); $('#button').click(function () { alert(table.rows('.selected').data().length + ' row(s) selected'); }); // DataTable var table = $('#example').DataTable({ initComplete: function () { // Apply the search this.api() .columns() .every(function () { var that = this; $('input', this.footer()).on('keyup change clear', function () { if (that.search() !== this.value) { that.search(this.value).draw(); } }); }); }, }); }); </script>Mi código HTML es el siguiente:
<form action="/get1" method="POST" name = 'input'> <button id="button">Row count</button> <table id="example" class="table table-striped"> <thead> <tr> <th scope="col">Index</th> <th scope="col">Col2</th> <th scope="col">Col3</th> <th scope="col">Col4</th> </tr> </thead> <tbody> {% for item in rows %} <tr> <td>{{item[0]}}</td> <td>{{ item[1] }}</td> <td>{{ item[2] }}</td> <td>{{ item[3] }}</td> </tr> {% endfor %} </tbody> <tfoot> <tr> <th>Index</th> <th>Col2</th> <th>Col3</th> <th>Col4</th> </tr> </tfoot> </table> </form>Necesito ayuda con JS y HTML para publicar valores (como el índice de fila) en el backend que el backend puede leer.
Supongamos que ha agregado los siguientes recursos de DataTables Select al encabezado de su página web:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.4.0/css/select.dataTables.css"/> <script type="text/javascript" src="https://cdn.datatables.net/select/1.4.0/js/dataTables.select.js"></script>Luego puede habilitar la extensión agregando la siguiente opción a su DataTable:
select: true Ahora puede experimentar seleccionando y deseleccionando filas. Puede usar las CTRL y SHIFT para seleccionar varias filas.
En su evento de clic de botón, ahora puede usar la función selected() que mencioné en mi comentario, por ejemplo:
$('#button').click(function () { selected_ids = []; table.rows().every(function () { if ( this.selected() ) { selected_ids.push( this.data()[0] ); } }); console.log( selected_ids ); });Esto capturará una matriz de ID de las filas seleccionadas.
Tenga en cuenta cómo usa una lógica muy similar a la función columns().every() que ya tiene, excepto que usa rows().every() para iterar sobre las filas en DataTable, no solo las filas visibles en la página actual, pero también todas las filas en otras páginas de DataTables (si hay varias páginas de datos de tabla).
El siguiente paso es una pregunta completamente diferente: cómo enviar las ID en esa matriz a su back-end de Flask.
Eso se ha cubierto en otras partes en varias preguntas, por ejemplo: ejemplo jQuery Ajax POST con PHP . Sí, esto menciona PHP, pero la pieza de jQuery es independiente de la tecnología del servidor.
Esa pregunta tiene 25 respuestas, y hay varias otras preguntas similares, que deberían ayudarlo. Si te quedas atascado, puedes hacer una nueva pregunta con el problema específico al que te enfrentas.
Pero, básicamente, en lugar de mi console.log( selected_ids ); , usaría una llamada jquery Ajax: $.ajax( { ... } ); para enviar los datos a Flask.