Hola chicos, tengo un problema cuando estoy usando jQuery datatable. Después de cargar Datatable, se envía una ID al servidor y luego el servidor responde con los datos que presento en DataTable. En ese DataTable, quiero hacer una selección de filas múltiples y los valores que quiero insertar en la matriz son, por ejemplo, todos los valores de la primera columna. Mi código a continuación es todo lo que he creado ahora. El código HTML:
<form name="search_form_order" id="search_form_order" novalidate=""> <input type="text" name='login_id' id="login_id" class='form-control'> <button type="submit" name="search" id="search">Search</button> </form> <table id="orders_table" width='100%'> <thead> <tr> <th>Login ID</th> <th>Order ID</th> <th>Comment</th> <th class="disabled-sorting">Actions</th> </tr> </thead> <tfoot> <th>Login ID</th> <th>Order ID</th> <th>Comment</th> <th class="disabled-sorting">Actions</th> </tfoot> </table>Código jQuery:
//This is the part where user submit the id parameter $('#search_form_order').on('submit', function(event) { event.preventDefault(); var id = $('#login_id').val(); $('#orders_table').DataTable().destroy(); loadOrdersTable(id); }); //This is the function function loadOrdersTable (id) { table=$('#orders_table').DataTable({ responsive: true, processing: true, serverSide: false, lengthMenu: [[100, -1], [100, "All"]], "ajax": { url: "/list_orders.php", type:"POST", dataSrc: "", data: {login_id:id} }, columns: [ {data: 'login_id', name: 'login_id'}, {data: 'order_id', name: 'order_id'}, {data: 'comment', name: 'comment'}, {data: 'actions', name: 'actions'} ] }); }Hasta aquí todo funciona perfectamente, pero cuando quiero seleccionar order_id-s de cada fila, el siguiente código jQuery no funciona:
var dataArr = []; $('#orders_table tbody').on('click', 'tr', function () { $(this).toggleClass('selected'); var id= $(this).find('td').eq(1).text(); dataArr.push(id); }); console.log(dataArr);Esto lo estoy usando porque quiero completar esta matriz, para hacer una edición masiva o una eliminación masiva de todas las filas seleccionadas. En la consola, solo se muestra este '[]', como salida, ya que el evento onlcick no obtiene el valor de las filas de la tabla.
¡Gracias!
su error es que tiene su console.log fuera del controlador de eventos. Eso significa que se ejecuta cuando se carga la página y, por lo tanto, la matriz está vacía.
Si mueve eso dentro de su controlador de eventos (1 antes), verá que cada vez que haga clic, la ID se empuja a la matriz y luego se muestra en la consola.
Aquí hay un fragmento de trabajo:
PD: tenga en cuenta que cada vez que haga clic en una fila, la ID se agregará a la matriz, lo que provocará posibles duplicaciones, mientras que la alternancia ... alternará, probablemente causando comportamientos inesperados. Debería agregar lógica adicional para evitar eso
var dataArr = []; $('#orders_table tbody').on('click', 'tr', function () { $(this).toggleClass('selected'); var id= $(this).find('td').eq(1).text(); dataArr.push(id); console.log(dataArr); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="orders_table" width='100%'> <thead> <tr> <th>Login ID</th> <th>Order ID</th> <th>Comment</th> <th class="disabled-sorting">Actions</th> </tr> </thead> <tbody> <tr> <td>login_id</td> <td>order_id</td> <td>comment</td> <td>actions</td> </tr> </tbody> <tfoot> <th>Login ID</th> <th>Order ID</th> <th>Comment</th> <th class="disabled-sorting">Actions</th> </tfoot> </table>