Quiero colocar la barra de filtro y otros elementos de mi tabla de tablas de datos en otra parte completa de mi página. En particular, me gustaría mover la barra de filtro de búsqueda a la sección titulada 'filtros' y, en el proceso, aprender a mover cualquiera de estos elementos. Sin embargo, parece que no puedo averiguar cómo hacerlo y solo he tenido suerte moviéndolos a la parte superior e inferior de la tabla. Lo intenté con getElementById pero no tuve suerte.

Este es un código de ejemplo simple, pero tenga en cuenta que estoy usando una aplicación Flask que extrae datos a través de Python y la tabla de datos en sí es un poco más complicada.

HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- Datatables --> <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <div class="filters"> I have a bunch of filters sitting on the left here and want to move some parts from the datatable here. </div> <div class="main"> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> </tr> </tbody> </table> </div> <script> $(document).ready(function () { $('#example').DataTable(); }); </script>

CSS

 .filters { position: fixed; width: 34%; height: 100%; overflow: hidden; background-color:lightgray; } .main { position: absolute; width: 66%; height: 100%; left: 34%; top: 10%; padding-left:10px; padding-top:20px; }

Resultado deseado