0
190
ViewsTabla de datos del cuadro de búsqueda fuera de la tabla
Estoy tratando de crear tablas de datos de cuadro de búsqueda fuera de la tabla, estoy usando la versión 1.12.1 de tablas de datos, uso la referencia del sitio web y no funcionará, el cuadro de búsqueda no funciona.
El resultado:
oTable = $('#example').dataTable(); $('#myInputTextField').keyup(function() { oTable.search($(this).val()).draw(); }) <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> <input type="text" id="myInputTextField"> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011-04-25</td> <td>$320,800</td> </tr> <tr> <td>Foo bar</td> <td>Engineer</td> <td>Glasgow</td> <td>45</td> <td>2012-05-26</td> <td>$100,800</td> </tr> </tbody> </table>
·
Juan Pablo Isaza
1 answers
Answer question0
Para obtener una referencia a la instancia de la tabla de datos, debe usar DataTable() , no dataTable() . Este último proporciona un objeto jQuery.
También sugeriría usar el evento de input para el cuadro de búsqueda, ya que permite a los usuarios ingresar texto de cualquier manera posible, no solo usando el teclado.
let oTable = $('#example').DataTable(); $('#myInputTextField').on('input', function() { oTable.search($(this).val()).draw(); }) <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css"> <input type="text" id="myInputTextField"> <table id="example" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011-04-25</td> <td>$320,800</td> </tr> <tr> <td>Foo bar</td> <td>Engineer</td> <td>Glasgow</td> <td>45</td> <td>2012-05-26</td> <td>$100,800</td> </tr> </tbody> </table>
·
Juan Pablo Isaza
Report
Answer question