JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="table_id">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Bot</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td><button type="button" id="myBtn_1">Select</button></td>
</tr>
<tr>
<td>Ana</td>
<td>22</td>
<td><button type="button" id="myBtn_2">Select</button></td>
</tr>
<tr>
<td>Diana</td>
<td>23</td>
<td><button type="button" id="myBtn_3">Select</button></td>
</tr>
<tr>
<td>Lino</td>
<td>32</td>
<td><button type="button" id="myBtn_4">Select</button></td>
</tr>
</tbody>
</table>
<button type="button" class="valide" id="valider">Validation</button>
<div id="result"> </div>
JavaScript
$(document).ready(function() {
//your code for construct the table
var table = $('#table_id').DataTable();//change this to be equal to the id of your table
$('#table_id').on( 'click', 'button', function () { //change this to be equal to the id of your table
var index = table.row( this ).index();
console.log(index);
var data_row = table.row( $(this).parents('tr') ).data();
console.log('Name: ' + data_row[0] + "\n" + 'Age: ' + data_row[1]);
$.ajax( {
type : 'POST',
data : {'data0': data_row[0], 'data1': data_row[1] },
url : 'server_processing.php',
success: function ( data ) {
console.log( data );
},
error: function ( xhr ) {
console.log( "error" );
}
});
} );
});