Is there any way to complete an array with values of clicked rows, after a jQuery DataTable is loaded by submitting a form?

Question

Hi guys I have a problem when I'm using jQuery datatable. After Datatable is loaded by submitting an ID to the server, and then server response with the data that I render then into DataTable. In that DataTable I want to make multiple row selection and the values that I want to push into array are for example all the values of first column. My code below is everything that I have created now. The HTML Code:

<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>

jQuery Code:

  //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'}
]
});   
}

Until here everything works perfectly, but when I want to select the the order_id-s of each row, the below jQuery code do not work:

 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); 

This I'm using because I want to populate this array, to make bulk edit or bulk delete of all selected rows. On console it is displayed only this '[]', as output since onlcick event do not get the value from table rows.

Thank you!

Answer 1

your mistake is that you have your console.log outside of the event handler. That means that it's executed when the page is loaded and thus the array is empty.

If you move that inside your event handler (1 before) you'll se that everytime you click, the ID is pushed to the array and then shown at console.

Here is a working snippet:

PD: Note that everytime you click on one row the ID will be added to the array causing possible duplications, meanwhile the toggle will.. toggle, probably causing unexpected behaviours. You should need to add extra logic to avoid that

 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>