How do you get the value of certain a cell in a single or multiple selected row via checkboxes and pass that row value to other php form for query. Basically I have a datatable with select extension and searchbuilder. I was able to make the multiple item select but can't seem to make the get selected row to work.
Table
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>
<form method="post" action="query.php">
<button type="submit" name="send"></button>
</form>
</th>
<th>ID</th>
<th>Name</th>
</thead>
<tbody>
<?php
$sql = mysqli_query($db,"query inside here");
while ($row=mysqli_fetch_array($sql)){ ?>
<tr>
<td></td>
<td><?php echo $row['app_id'] ?></td>
<td><?php echo $row['app_nname']</td>
<?php }?>
</tbody>
<tfooter>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
</tr>
</tfooter>
</table>
Javascript
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'QBfrtip',
select: true,
buttons: [
{
text: 'Select all',
action: function () {
table.rows({
page:'current',search: 'applied'} ).select();
}
},
{
text: 'Select none',
action: function () {
table.rows().deselect();
}
}
],
columnDefs: [{
searchBuilder: {
defaultCondition: "=",
},
targets: [1]
}],
} );
} );
</script>
I have tried using the table.rows({selected:true}) but can't figure out how to get the specific or group of values necessary for query (app_id).
In addition, how do I make the app_id value be passed to the next php page via button click in the header tag?
"How do you get the value of certain a cell in a single or multiple selected row"
One suggestion: Given you are using DataTables buttons already, why not create a DataTable button to handle the capturing of the selected IDs you want.
For this, I ignored the first column (the checkboxes column) in your question's table since it is not needed for my demo.
You can add that back into your demo - it does not change the overall approach, if you prefer.
I add one more button:
{
text: 'Get selected data',
action: function () {
var rows = table.rows( { selected: true } ).data().toArray();
console.log( rows ); // array of selected rows (each row is an array of data)
var ids = rows.map(function(x) {
return x[0];
});
console.log( ids ); // array of selected IDs
}
}
The logic is broken down into small steps, just for demo purposes - but you could streamline that. The final console.log( ids ) will log an array of values from column 0 (the ID column).
The key step is to use this:
rows( { selected: true } )
to access the selected rows.
Once you have the array of values you need to POST to your server, then that is a separate step. This answer only deals with getting the selected data from the DataTable.
If you still prefer to use checkboxes (a totally reasonable approach) then you may also want to keep your standard HTML button.
A full demo:
$(document).ready(function() {
var table = $('#example').DataTable( {
dom: 'QBfrtip',
select: true,
buttons: [
{
text: 'Select all',
action: function () {
table.rows( {page:'current',search: 'applied'} ).select();
}
},
{
text: 'Select none',
action: function () {
table.rows().deselect();
}
},
{
text: 'Get selected data',
action: function () {
var rows = table.rows( { selected: true } ).data().toArray();
//console.log( rows ); // array of selected rows (each row is an array of data)
var ids = rows.map(function(x) {
return x[0];
});
console.log( ids ); // array of selected IDs
}
}
],
columnDefs: [{
searchBuilder: {
defaultCondition: "=",
},
targets: [1]
}]
} );
} );<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link href="https://cdn.datatables.net/1.13.3/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/buttons/2.3.5/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/searchbuilder/1.4.0/css/searchBuilder.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/select/1.6.1/css/select.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/searchbuilder/1.4.0/js/dataTables.searchBuilder.min.js"></script>
<script src="https://cdn.datatables.net/select/1.6.1/js/dataTables.select.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
</tr>
<tr>
<td>2</td>
<td>Garrett Winters</td>
</tr>
<tr>
<td>3</td>
<td>Ashton Cox</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>